将鼠标悬停在数据行上时显示编辑/删除链接

Question

我在<tr> 上有一个带有 ng-repeat 的表格，最后一个 td 我有编辑/删除链接，我只希望它们显示用户是否将鼠标悬停在 <tr> 上

<tr ng-repeat="form in allData | filter:search | orderBy: orderByValue : orderIn" ng-click="set_index($index)">
          <td><a ng-href={{form.link}}>{{form.ar_ref}}</a></td>
          <td>{{form.title}}</td>
          <td>{{form.category}}
            <span ng-class="{'show_edit_link', $index==selected_index}">
              <button ng-click="showUpdate()">Update</button>
              <button ng-click="showDelete()">Delete</button>
            </span>
          </td>
        </tr>

我的 JS 控制器：

pp.controller('formsListCtrl', ['$scope', '$http', function($scope, $http){

  $http.get('/php_user/formJSON.php').success(function(response){
    $scope.allData=response; 

    //Show hover edit links
    $scope.selected_index = 0;
    $scope.set_index = function(i){ //i is the $index that we will pass in when hover in the forms_admin.php
      $scope.selected_index = i;
    }

CSS：

.edit_link_show{
  display: inline;
}
.edit_link{
  display: none;
}

Answer 1

您的 ng-controller 中存在语法错误。对于类名之后的表达式，它应该是 :，并且您还想为 selected_index 设置另一个不等于 $index 的 ng-class 参数：

<tr ng-repeat="form in allData | filter:search | orderBy: orderByValue : orderIn" ng-click="set_index($index)">
          <td><a ng-href={{form.link}}>{{form.ar_ref}}</a></td>
          <td>{{form.title}}</td>
          <td>{{form.category}}
            <span ng-class="{'show_edit_link': $index==selected_index, 'edit_link': $index!=selected_index}">
              <button ng-click="showUpdate()">Update</button>
              <button ng-click="showDelete()">Delete</button>
            </span>
          </td>
        </tr>