I need some help with angular filter. I need to filter array by multiple values in one field.
Array looks like this:
$scope.items = [{
"item": "one",
"tags": "2,5"
}, {
"item": "two",
"tags": "3,4,6,7"
}, {
"item": "three",
"tags": "1,3,5"
}];
I want to search items by tags that are separated by comma.
Example: in search field user input tags separated with comma (or select by checkbox) and select tags 1 and 3. How to list all items that have those tags? In this example second and third item.
Plunker
Here is your required answer using the checkboxes.
angular.module('app', [])
.controller('Controller', function($scope) {
$scope.items = [{
"name": "one",
"tags": "2,5"
}, {
"name": "two",
"tags": "3,4,6,7"
}, {
"name": "three",
"tags": "1,3,5"
}];
$scope.items_dup = $scope.items
// checkbox selection
$scope.selection = [];
$scope.toggleSelection = function toggleSelection(filter) {
var idx = $scope.selection.indexOf(filter);
if (idx > -1) {
$scope.selection.splice(idx, 1);
} else {
$scope.selection.push(filter);
}
};
// filter list
$scope.filter = function() {
filterTag($scope.selection,$scope.items);
function filterTag(selected,items){
var out = [];
angular.forEach(items, function(value, key) {
angular.forEach(selected, function(inner_value, key) {
if(value.tags.split(',').indexOf(inner_value.toString()) > -1)
{
if(out.indexOf(value) == -1)
{
out.push(value)
}
}
})
})
if(out.length > 0)
{
$scope.items_dup = out;
}
else
{
$scope.items_dup = $scope.items;
}
}
};
})<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Controller">
<h1>Tag filter!</h1>
<li ng-repeat="item in items_dup">
{{item.name}}
</li>
<hr>
<p>Select filter</p>
<label>
<input type="checkbox" value="1" ng-click="toggleSelection(1)"> 1
</label>
<br>
<label>
<input type="checkbox" value="2" ng-click="toggleSelection(2)"> 2
</label><br>
<label>
<input type="checkbox" value="3" ng-click="toggleSelection(3)"> 3
</label>
<br><br>
<button ng-click="filter()">Filter list</button>
</div>
</body>
</html>Please run the code snippet and check.