Question

我使用AngularJS列出并过滤任务板。我还使用unique删除ng-options中重复的字符串。当我加载页面时，angular会很好地列出所有json，但是当我尝试使用<select>来过滤内容时，它只返回1个结果。

例如：在json中，我有2个数组Feb。如果我在Feb上选择<select>，它只返回1个结果而不是2.我做错了什么？

HTML：

<body ng-controller="ListTask">
    <div>
        <select bg-model="categoryFilter" ng-options="task.category for task in tasks | unique: 'category'">
            <option value="">category</option>
        </select>
        <select ng-model="statusFilter" ng-options="task.status for task in tasks | unique: 'status'">
            <option value="">status</option>
        </select>
        <select ng-model="monthFilter" ng-options="task.month for task in tasks | unique: 'month'">
            <option value="">month</option>
        </select>
    </div>
    <div>
        <li ng-repeat="tasks in task | filter: categoryFilter | filter: statusFilter | filter: monthFilter">
            <p>{{task.title}}</p>
            <small>{{task.month}} {{task.category}}</small>
        </li>
    </div>
</body>

JSON：

[
    {
        "title": "Title 1",
        "status": "open",
        "month": "Feb",
        "category": "Cat 1"
    },
    {
        "title": "Title 2",
        "status": "closed",
        "month": "Feb",
        "category": "Cat 2"
    },
    {
        "title": "Title 3",
        "status": "delayed",
        "month": "Mar",
        "category": "Cat 1"
    },
    {
        "title": "Title 4",
        "status": "closed",
        "month": "Mar",
        "category": "Cat 3"
    }
]

控制器：

var myApp = angular.module('myApp', ['ui.utils']);

myApp.controller('ListTask', ['$scope', '$http', function($scope, $http){
    $http.get('/json/tasks.json').success(function(data){
        $scope.tasks = data;
    });
}]);

编辑＆gt;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT; 另一个问题是当我填写超过1 <select>时，它没有返回结果:(

Answer 1

事情是选择月份时的模型monthFilter如下所示：

{"title":"Title 1","status":"open","month":"Feb","category":"Cat 1"}

因此，当您使用filter: monthFilter时，它自然会匹配只有一条记录。

要解决此问题，您的过滤表达式应如下所示：

ng-repeat="task in tasks | filter: {category: categoryFilter.category, month: monthFilter.month, status: statusFilter.status}"

以上解决方案非常冗长。处理过滤的更好方法是只有一个过滤器模型，其中包含月，状态和类别的属性：

<div>
    <select ng-model="filter.category" 
            ng-change="clear('category')"
            ng-options="task.category as task.category for task in tasks | unique: 'category'">
        <option value="">category</option>
    </select>
    <select ng-model="filter.status" 
            ng-change="clear('status')"
            ng-options="task.status as task.status for task in tasks | unique: 'status'">
        <option value="">status</option>
    </select>
    <select ng-model="filter.month" 
            ng-change="clear('month')"
            ng-options="task.month as task.month for task in tasks | unique: 'month'">
        <option value="">month</option>
    </select>
    {{filter}}
</div>
<div>
    <li ng-repeat="task in tasks | filter: filter">
        <p>{{task.title}}</p>
        <small>{{task.month}} {{task.category}}</small>
    </li>
</div>

还有一件事需要照顾。当您从选择框中选择值时，它会很好地过滤。但是，如果要清除选择，它将不会过滤任何内容，因为在这种情况下，当没有选择任何内容时，过滤器模型将如下所示：

{month: null}

为了处理这种情况，我添加了ngChange指令来删除null值：

$scope.clear = function(key) {
    if ($scope.filter[key] === null) {
        delete $scope.filter[key];
    }
};

如何使angularjs唯一列出所有结果？

1 个答案:

演示：http://plnkr.co/edit/eE9TgjSPjcSgBnCWiMTS?p=preview