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

Question

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

• 功能正常
• 互相玩好，这样我就可以对这个页面上的信息进行相应的排序

搜索工作正常，但我对过滤器不满意。这些是我访问过的文章，但我没有奇迹般的顿悟或“啊哈！”时刻。我现在感觉像是终极的 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

您可以很容易地让选择列表排序工作 - 将您的 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 class="form-control" name="sort" ng-model="sortOrder">

您在选择列表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 以获取更新的小提琴。