同一页面上的多个过滤器 - 搜索、过滤、排序

Question

我遇到了障碍。我正在尝试将这些过滤器添加到

正常运行
彼此相处融洽，以便我可以相应地对该页面上的信息进行排序

搜索工作正常，但我对过滤器不满意。这些是我访问过的文章，但我没有任何顿悟或 'ah-ha!' 时刻。我觉得现在是终极 Angular 磨砂膏。

Help Article 1
Help Article 2
Help Article 3
Help Article 4 -（这个接近于复选框过滤器，但是 $.inArray jquery 让我陷入循环，因为 jquery 不包含在其中项目）

在过去的 5-6 个小时里，我一直在努力，但我完全没有运气。我需要一个 AngularJS 英雄！我怎样才能让这些过滤器工作？在这一点上，我们将不胜感激任何帮助。代码如下。谢谢！！！

jsFiddle link to my project

Answer 1

您可以很容易地使 select 列表排序工作 - 将您的 ng-repeat 更改为：

<div ng-repeat="item in inventory | filter: searchInventory | orderBy:sortOrder">

然后在您的$scope上声明：

// whatever you want to be the default
$scope.sortorder = "name";

然后将其作为 ng-model 添加到您的 select:

<select class="form-control" name="sort" ng-model="sortOrder">

您在 Select 列表 Option 标签上的值必须与您在 $scope.inventory 中的项目中指定的名称相匹配。使用 - & + 进行降序和升序：

<option value="-price">Price</option>
<option value="lowInventory">Low Inventory</option> // not declared
<option value="+qty">Out of Stock</option>
<option value="-status">Inactive</option>
<option value="+status">Status</option>

注意：您必须为 Low Inventory.

添加自己的逻辑

查看工作 jsfiddle here.

复选框过滤更高级一些，请参阅 here 示例。

更新：我设法使用简单的 ng-true-value 过滤器使一些复选框过滤工作。

<input type="checkbox" data-ng-model='search.status2' data-ng-true-value='inactive' data-ng-false-value=''> Inactive

<input type="checkbox" data-ng-model='search.status1' data-ng-true-value='!inactive' data-ng-false-value=''> Active

请参阅 here 了解更新后的 fiddle。

同一页面上的多个过滤器 - 搜索、过滤、排序

Multiple filters on same page - Search, Filter, Sort

javascript

angularjs

angularjs-filter