Question

我有一个应用程序，它以表格形式显示数据，其中包含列

ID，名称，价格，数量

使用ng-repeat显示数据请参阅

<body ng-controller="myController">
<h1>Data</h1>

<table>
  <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>PRICE</th>
    <th>QUANTITY</th>
  </tr>
  <tr ng-repeat="item in myData">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.price }}</td>
    <td>{{ item.quantity }}</td>
  </tr>
</table>

我想要做的是在此表中添加ng-repeat中的多个过滤器

a）按'名称'过滤

b）按'价格'或'数量'过滤

这意味着在任何给定的时间点，表的结果应该通过

的组合进行过滤

i）“姓名”和“价格”

ii）或'姓名'和'数量'

当价格过滤器处于活动状态时，数量过滤器应处于非活动状态，反之亦然。

我将有3个输入字段用于过滤器参数。

如何在html中对ng-repeat应用过滤器来实现此目的？

Answer 1

我建议您创建一个自定义过滤器并传递一个自定义filterObject，其中包含此过滤器的所有过滤选项。

<tr ng-repeat="item in myData | myCustomFilter:filterObject">
  <td>{{ item.id }}</td>
  <td>{{ item.name }}</td>
  <td>{{ item.price }}</td>
  <td>{{ item.quantity }}</td>
</tr>

你的filterobject看起来像：

$scope.filterObject = {
    id: false,
    name: true,
    price: false,
    quantity: true
}

在myCustomFilter中：

app.filter('myCustomFilter', function(items, filterObject) {
    // filter your items depending on which filters are enabled
});

Answer 2

这是测试myDatafilter 添加js

myDatafilter = function () {};

<h1>Data</h1>
<input type="text" ng-model="myDatafilter"/>
<tr ng-repeat="item in myData | filter:myDatafilter">

Angular js中的多个过滤器

2 个答案: