I am trying to filter out json data. This is what i did.
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"
}
];
}]);
And this one is doing well when user select only one value from the list and "type" is not a array.But,I want to know how can i filter the data which is like below and user can select multiple value from a list and data will be filtered by taking the OR condition in to consideration.
$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"
}
];
EX. if user select class A and Class B then output will be Name 1, Name 2, Name 5
You need to make your own filter for this purpose.
Here is the Demo . Go through tutorial about how to make custom filters.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.