var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.myList = [
{name:'foo', status:'new', created: '2016-01-01'},
{name:'bar', status: 'pending', created: '2016-02-01'},
{name:'baz', status: 'done', created: '2016-03-01'},
{name:'qux', status: 'testing', created: '2016-04-01'},
{name:'quux', status: 'new', created: '2016-05-01'},
{name:'quuux', status: 'done', created: '2016-06-01'},
{name:'quuuux', status: 'new', created: '2016-07-01'}
];
// for example 1
$scope.filterparam = 'status';
$scope.filtervalue = 'done';
$scope.filterparam2 = 'created';
$scope.filtervalue2 = '2016-01-01';
// for example 2
$scope.myfilterparam = { 'status' : 'new' }
$scope.myfilterparam2 = { 'created' : '2016-03-01' }
}).filter("myfilter", function () {
return function (x, param, val) {
var filteredList = [];
for (var i in x) {
if (x[i][param] == val) {
filteredList.push(x[i]);
}
}
return filteredList;
}
});
<!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.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h3>example 1</h3>
<ul ng-repeat="item in myList | myfilter:filterparam:filtervalue">
<li>
{{item.name}}
<ul>
<li>{{item.status}}</li>
<li>{{item.created}}</li>
</ul>
</li>
</ul>
<hr/>
<ul ng-repeat="item in myList | myfilter:filterparam2:filtervalue2">
<li>
{{item.name}}
<ul>
<li>{{item.status}}</li>
<li>{{item.created}}</li>
</ul>
</li>
</ul>
<hr/>
<h3>example 2</h3>
<ul ng-repeat="item in myList | filter:myfilterparam">
<li>
{{item.name}}
<ul>
<li>{{item.status}}</li>
<li>{{item.created}}</li>
</ul>
</li>
</ul>
<hr/>
<ul ng-repeat="item in myList | filter:myfilterparam2">
<li>
{{item.name}}
<ul>
<li>{{item.status}}</li>
<li>{{item.created}}</li>
</ul>
</li>
</ul>
</body>
</html>
/* Put your css in here */