Question

我的AngularJS应用程序显示了一个狗列表。用户可以使用复选框选择其中一些狗，然后单击删除按钮删除选定的狗。像这样：

<tr ng-repeat="dog in dogs">
    <td>{{dog.name}}</td>
    <td>{{dog.breed}}</td>
    <td><input type="checkbox" ng-model="dog.checked"></td>
</tr>

<button ng-click="deleteDogs(dogs)">Delete</button>

我试图了解在Angular中执行此操作的最佳方法。目前，我的ng-click只调用deleteDogs(dogs)，并且该控制器方法会测试每条狗在删除之前是否已经过检查。它有效，但我不喜欢它。特别是我不喜欢我将整个狗列表传递给deleteDogs()。

所以，我编写了一个自定义isChecked过滤器来测试一个对象是否有checked=true，希望这样做：

<button ng-click="deleteDogs(dogs | filter:isChecked)">Delete</button>

甚至是这样：

<button ng-click="deleteDogs(dogs | filter:{checked:true})">Delete</button>

但两者都会导致Angular解析错误。有没有更好的方法来实现这一目标？感谢。

Answer 1

在点击处理程序中使用过滤器。将$filter传递给您的控制器，然后：

$filter("filterNameHere")(input, arg1, arg2, ...);

如果您在模板中执行此操作时，您还可以将过滤器绑定到范围：

$scope.myFilter = $filter("filterNameHere");

然后：

<thing ng-click="doSomething(myFilter(someValue, someArg))"></thing>

Answer 2

尝试在你的复选框中添加一个ng-click，将该狗添加到一组狗中，用原始狗数组中的索引删除。这解决了你处理整个狗阵列的问题，并使你的功能非常快，因为你可以简单地拼出不需要的条目。

另一种方法是使用复选框来放置删除图标，当单击时，您可以简单地运行附加到每个狗对象的方法，将其自身从数组中移除（如果适用，则进行API调用）。

Answer 3

首先，您无法使用过滤器。

我希望您在与deleteDogs()相同的范围内调用dogs函数。那么为什么要通过狗列表？

我建议您只编写一个deteleDogs()函数，不带任何参数，它执行以下操作：

dogs = dogs.filter(function (dog) { return !dog.checked; });

这将适当地过滤狗阵列并仅保留未检查的狗阵列。

在ng-click中使用过滤器

3 个答案: