[英]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.