var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.users = [
{
id: 1,
name: 'John Doe',
items: [ { id: 1, name: 'Admin3', status: 'O' }, { id: 2, name: 'Doe', status: 'O' }],
},
{
id: 12,
name: 'Barbara',
items: [ { id: 15, name: 'Wif3e', status: 'C' }, { id: 2, name: 'Do9e', status: 'O' }],
},{
id: 13,
name: 'Doe',
items: [ { id: 15, name: 'W4if3e', status: 'D' }, { id: 2, name: 'D8oe', status: 'PL' }],
},{
id: 14,
name: '32Doe',
items: [ { id: 15, name: 'Wif4e', status: 'P' }, { id: 2, name: 'Do4e', status: 'C' }],
},{
id: 15,
name: '555 Doe',
items: [ { id: 15, name: 'Wi6fe', status: 'C' }, { id: 2, name: 'D7oe', status: 'CL' }],
},{
id: 16,
name: '666 Doe',
items: [ { id: 15, name: 'W7ife', status: 'P' }, { id: 2, name: '5Doe', status: 'D' }],
}];
});
// Strict filter for comparing objects like "give me all users having rank with id 1":
// {{ user in users | strictFilter:{ranks: [{id: 1}]} }}
// Standart filter will return also users having ranks with id 10, 12 or 100500
app.filter('strictRecurrentFilter', function($filter) {
var strictComparator; // Very strict comparator to get very strict results
strictComparator = function(actual, expected) {
var objKey;
if (actual && expected && actual instanceof Array && expected instanceof Array) {
for (var arrIdx in actual) {
if (strictComparator(actual[arrIdx], expected[0])) return true;
}
} else if (actual && expected && typeof actual === "object" && typeof expected === "object") {
for (objKey in actual) {
if (objKey.charAt(0) !== "$" && hasOwnProperty.call(actual, objKey) && strictComparator(actual[objKey], expected[objKey])) {
return true;
}
}
return false;
}
return angular.equals(actual, expected);
};
// Use standard filter with our strict comparator
return function(array, expression) {
return $filter('filter')(array, expression, strictComparator);
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<p>Try to enter O, D, PL or P into this field: <input ng-model="stat"></p>
<p>Here is the users with rank id beginning with {{stat}} (standard filter)</p>
<ul>
<li ng-repeat="user in users | filter:{items: [{status: stat}]}">
{{ user }}
</li>
</ul>
<p>Here is the users with rank id {{stat}} (strict recurrent filter — see file app.js)</p>
<ul>
<li ng-repeat="user in users | strictRecurrentFilter:{items: [{status: stat}]}">
{{ user }}
</li>
</ul>
<p>And all users as is</p>
<ul>
<li ng-repeat="user in users">
{{ user }}
</li>
</ul>
</body>
</html>