如何删除包含ng-click的行？

Question

如何删除包含ng-click的行？

5

在下面的代码中，当我删除一个客户时，我希望 TR 行被删除。

最好的方法是什么？我是否需要将该行作为参数发送到 deleteCustomer 中？在 AngularJS 中，我是否可以以某种方式访问 TR DOM 元素？

<html ng-app="mainModule">
    <head>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    </head>    
    <body ng-controller="mainController" style="padding: 20px">
        <div class="col-lg-5">
            <table style="width: 500px" class="table-striped table-bordered table table-hover">
                <tr ng-repeat="customer in customers">
                    <td style="width:50px"><button ng-click="deleteCustomer(customer)">Delete</button></td>
                    <td style="text-align:right">{{customer.id}}</td>
                    <td>{{customer.firstName}}</td>
                    <td>{{customer.lastName}}</td>
                </tr>
            </table>
        </div>
        <div class="col-lg-7">
            <div class="panel panel-info">
                <div class="panel-heading">Logger</div>
                <div class="panel-body" style="padding:0">
                    <table class="table table-bordered" style="margin:0">
                        <tr ng-repeat="loggedAction in loggedActions">
                            <td>{{loggedAction.action}}</td>
                            <td>{{loggedAction.description}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <script>
        var mainModule = angular.module('mainModule', []);
        function mainController($scope) {

            $scope.loggedActions = [];

            $scope.customers = [
                {id: 1, firstName: 'Joe', lastName: 'Thompson'},
                {id: 2, firstName: 'Hank', lastName: 'Howards'},
                {id: 3, firstName: 'Zoe', lastName: 'Frappe'}
            ];

            $scope.deleteCustomer = function (customer) {
                $scope.$emit('customerDeleted', customer);
            };

            $scope.$on('customerDeleted', function (event, customer) {
                $scope.loggedActions.push({action: 'delete', description: 'Deleted customer ' + customer.firstName + ' ' + customer.lastName});
            });
        }
        </script>
    </body>
</html>

- Edward Tanguay

你可以在 ng-repeat 中使用 $index 进行跟踪，并通过 ng-if 条件性显示行。 ng-if 只在满足条件时呈现DOM元素。 - simeg

2个回答

1

工作示例：

http://plnkr.co/edit/7MOdokoohX0mv9uSWuAF?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = ['a', 'b', 'c', 'd', 'e'];
  $scope.delete = function(at) {
    $scope.data.splice(at, 1);
  }
});

模板：

  <body ng-app="plunker" ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div ng-repeat="elem in data">
        {{elem}}
        <button ng-click="delete($index)">delete {{elem}}</button>
    </div>

  </body>

- Peter Ashwell

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nitsan Baleli · Accepted Answer

编辑：

正如 @K.Toress 的评论所指出的那样，更好的方法是在函数内使用 indexOf() 检索已删除客户的索引，而不是传递 ng-repeat 中的 $index。如果使用过滤器或对数组进行排序，则传递 $index 将会产生意想不到的结果。

deleteCustomer 函数：

$scope.deleteCustomer = function (customer) {
  var index = $scope.customers.indexOf(customer);
  $scope.customers.splice(index, 1);
  $scope.$emit('customerDeleted', customer); 
};

更新了 plnkr

您可以在删除函数中使用ng-repeat提供的$index和array.splice:

html:

<button ng-click="deleteCustomer($index, customer)">Delete</button>

js:

$scope.deleteCustomer = function ($index, customer) {
  $scope.customers.splice($index, 1);
  $scope.$emit('customerDeleted', customer);
};

plnkr