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>

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

1 个答案: