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

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>

注意:您必须包含自己的低库存逻辑。

查看正在工作的 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 。