Question

使用ng-repeat我重复tr，每行都有一个删除按钮，当我点击父tr要隐藏的删除按钮时，如何使用angularjs

<tr ng-repeat="affiliate in affiliateList" ng-hide='num == $index'>
      <td>{{affiliate.affName}}</td>
      <td>{{affiliate.affUrl}}</td>
      <td>{{affiliate.associatedId}}</td>
      <td><span class="btn btn-small" ng-click="delete(affiliate.affId); deleteList($index)">Delete</span></td>
    </tr>


$scope.num = 0;
$scope.deleteList = function(index){
    $scope.num = index;
}

Answer 1

您可以尝试使用此代码，但不需要编写该函数。

<tr ng-repeat="affiliate in affiliateList" ng-hide='num == $index'>
      <td>{{affiliate.affName}}</td>
      <td>{{affiliate.affUrl}}</td>
      <td>{{affiliate.associatedId}}</td>
      <td><span class="btn btn-small" ng-click="delete(affiliate.affId); num=$index">Delete</span></td>
</tr>

Answer 2

而不是隐藏行，将其从列表中删除

HTML

<span class="btn btn-small" ng-click="delete(affiliate)">Delete</span>

JS

$scope.delete = function(item) {
   $scope.affiliates.splice(item, 1);
}

Answer 3

可能是你正在寻找这个Remove Table row dynamically 希望它能帮到你..

Answer 4

{{1}}

你可以删除那个ng-hide条件。

Answer 5

您需要为每个对象提供变量（例如可见性），我们可以使用它来跟踪每行的状态。

affiliate

{
    'visibility': value
    'affId': value,
    'affName': value,
    'affUrl': value,
    'associatedId': value,
}

使用true初始化可见性，affId包含每个对象的唯一值。

示例html.js

<tr ng-repeat="affiliate in affiliateList track by affiliate.affId" ng-hide='!affiliate.visibility'>
      <td>{{affiliate.affName}}</td>
      <td>{{affiliate.affUrl}}</td>
      <td>{{affiliate.associatedId}}</td>
      <td><span class="btn btn-small" ng-click="delete(affiliate.affId); deleteList(affiliate)">Delete</span></td>
    </tr>

controller.js

$scope.deleteList = function(affiliate){
     affiliate.visibility = false;
}

这肯定会解决问题。

如何在ng-click上隐藏表格行

5 个答案: