javascript - 在应用 limitTo 之前添加条件过滤器

Question

我可以将 limitTo 与条件一起使用吗？它的文档仅显示了简单的用法。

假设我想显示名为 car 的项目的 2 个结果:

$scope.items = [
    {"name":"laptop","color":"green"},
    {"name":"shoe","color":"blue"},
    {"name":"Car","color":"gold"},
    {"name":"Car","color":"gold"},
    {"name":"Car","color":"gold"}
];

Plunker

Answer 1

您可以在 limitTo 过滤器前面添加一个附加过滤器。这称为过滤器链接:

<li ng-repeat="item in items | filter: 'car' | limitTo: 2">{{item.name}}</li>

如果您希望 filter 仅应用于 items 数组的 name 属性，您可以使用对象文字来缩小范围:

<li ng-repeat="item in items | filter: {name: 'car'} | limitTo: 2">{{item.name}} - {{item.color}}</li>

这也可以使用基于用户输入的动态值:

<input type="text" ng-model="search.name" />
<li ng-repeat="item in items | filter: search | limitTo: 2">{{item.name}} - {{item.color}}</li>

了解更多关于filter chaining的信息在 Angular 文档中。