[英]filter json data using angular by drop down
我正在尝试过滤掉json数据。 这就是我所做的。
angular.module('staticSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
multipleSelect: ["classA"]
};
$scope.isoffice = function(apps) {
return apps.type === $scope.data.multipleSelect[0];
};
console.log($scope.data.multipleSelect[0]);
$scope.apps = [{
"id": "1",
"type": "classA",
"name": "Name 1"
}, {
"id": "2",
"type": "classB",
"name": "Name 2"
}, {
"id": "3",
"type": "classC",
"name": "Name 3"
}, {
"id": "4",
"type": "classD",
"name": "Name 4"
}, {
"id": "5",
"type": "classE",
"name": "Name 5"
}
];
}]);
当用户仅从列表中选择一个值并且“类型”不是数组时,这种方法效果很好。但是,我想知道如何过滤如下所示的数据,并且用户可以从列表中选择多个值,数据将通过考虑“或”条件进行过滤。
$scope.apps = [{
"id": "1",
"type": ["classA","classB","classC"],
"name": "Name 1"
}, {
"id": "2",
"type": ["classB","classC","classE"],
"name": "Name 2"
}, {
"id": "3",
"type": ["classC"],
"name": "Name 3"
}, {
"id": "4",
"type": ["classD","classC"],
"name": "Name 4"
}, {
"id": "5",
"type": ["classA","classB","classC","classD","classE"],
"name": "Name 5"
}
];
例如 如果用户选择A类和B类,则输出将为Name 1,Name 2,Name 5
为此,您需要制作自己的过滤器。
这是演示 。 阅读有关如何制作自定义过滤器的教程 。
angular.module('staticSelect', []) .controller('ExampleController', ['$scope', function($scope) { $scope.data = { multipleSelect: ["classA"] }; $scope.isoffice = function(apps) { return apps.type === $scope.data.multipleSelect[0]; }; console.log($scope.data.multipleSelect[0]); $scope.apps = [{ "id": "1", "type": ["classA","classB","classC"], "name": "Name 1" }, { "id": "2", "type": ["classB","classC","classE"], "name": "Name 2" }, { "id": "3", "type": ["classC"], "name": "Name 3" }, { "id": "4", "type": ["classD","classC"], "name": "Name 4" }, { "id": "5", "type": ["classA","classB","classC","classD","classE"], "name": "Name 5" } ]; }]).filter('multiplefilter', function() { return function(arr , filterFrom) { var filteredArray = []; angular.forEach(filterFrom, function (value, key) { angular.forEach(arr, function (arrObj, key) { if(arrObj.type.indexOf(value) > -1 && filteredArray.indexOf(arrObj) == -1){ filteredArray.push(arrObj); } }) }); return filteredArray; } });
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-static-select-production</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> </head> <body ng-app="staticSelect"> <div ng-controller="ExampleController"> <div ng-repeat="app in apps | multiplefilter: data.multipleSelect"> {{app.name}} </div> <form name="myForm"> <hr> <label for="multipleSelect"> Multiple select: </label> <br> <select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple> <option value="classA">Class A</option> <option value="classB">Class B</option> <option value="classC">Class C</option> <option value="classD">Class D</option> <option value="classE">Class E</option> </select> <br> <tt>multipleSelect = {{data.multipleSelect}}</tt> <br/> </form> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.