Angular js中的多个过滤器答案

【问题标题】：Multiple Filters in Angular jsAngular js中的多个过滤器
【发布时间】：2016-10-18 01:42:47
【问题描述】：

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

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 以实现此目的？

【问题讨论】：

你的意思是过滤还是排序？还从哪里获得过滤所需的过滤值输入？例如，您如何知道要过滤的数量？
“如何将过滤器应用到 ng-repeat 来实现这一点？” - 与在 Angular 中进行普通过滤的方式相同。这已经被问过很多次了。至于禁用这对于一些布尔标志和设置它们的ngChange也是微不足道的。
ng-table.com
@gaurav5430 我想过滤结果集，我将有 3 个文本框用于名称、价格和数量。 name 是一个直接的过滤器，现在当用户在 Price 输入中输入内容时，另一个（数量）应该为空，反之亦然
@dfsq 我在 ng-repeat 中实现过滤器没有问题，在这里，我主要关心的是在价格和数量过滤器之间切换，一个实例只能应用其中一个。跨度>

标签： javascript angularjs filtering

【解决方案1】：

我建议你创建一个自定义过滤器并传递一个自定义过滤器对象，其中包含所有过滤器选项给这个过滤器。

<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>

你的过滤器对象看起来像：

$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
});

【讨论】：

【解决方案2】：

这是测试 myDatafilter 在js中添加

myDatafilter = function () {};

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

【讨论】：

你真的应该添加一些解释为什么这个代码应该工作 - 你也可以在代码本身中添加 cmets - 在它的当前形式中，它没有提供任何可以帮助其余部分的解释社区了解您为解决/回答问题所做的工作。