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

Question

我遇到了路障。我正试图让这些过滤器

• 功能正常
• 彼此玩得很好，以便我可以相应地对此页面上的信息进行排序

搜索工作正常，但我对过滤器没有运气。这些是我去过的文章，但我没有神奇的顿悟或'啊哈！时刻。我觉得目前是最终的角度磨砂膏。

• 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中项目中指定的名称相匹配。使用-＆amp; +用于下降＆amp;升序：

<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了解更新的小提琴。