同一页面上的多个筛选器-搜索、筛选、排序

Question

我碰到路障了。我想让这些过滤器

• 功能正确
• 彼此友好相处，这样我就可以相应地对页面上的信息进行排序。

​

​

搜索效果很好，但我对过滤器没什么发现。这些是我参观过的文章，但我没有奇迹般的顿悟，也没有“啊-哈！”片刻。我现在感觉像是终极的角质擦洗。

• 帮助第1条
• 帮助第2条
• 帮助第3条
• 帮助第4条 -(对于复选框过滤器来说，这一次非常接近，但是由于这个项目中没有包含jquery，所以$.inArray jquery会抛给我一个循环)

在过去的5-6个小时里，我一直在努力，但我一点运气都没有。我需要一个AngularJS英雄！我怎样才能让这些过滤器正常工作？在这一点上，任何帮助都将是非常感谢的。密码在下面。谢谢！

jsFiddle链接到我的项目

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

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包含自己的逻辑。

请参阅工作小提琴手这里。

复选框筛选更高级一些，参见这里中的一个示例。

更新:我设法让一些复选框过滤工作使用简单的ng-真-价值过滤器。

<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

有关更新的小提琴，请参见这里。