<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="mainCtrl">
<h1>Hello Plunker!</h1>
<select data-ng-options="i as format(i) for i in statusList" ng-model="statusFilter">
</select>
<ul>
<li ng-repeat="obj in objs | myFilter:statusFilter">{{obj.id}}</li>
</ul>
<script src="mainCtrl.js"></script>
</body>
</html>
/* Styles go here */
{
"data": [
{
"id":1,
"status":1
},
{
"id":2,
"status":0
},
{
"id":3,
"status":1
}
]
}
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope, $http, $locale) {
// number separator
$locale.NUMBER_FORMATS.GROUP_SEP = " ";
$scope.objs = [
{
"id":1,
"status":1
},
{
"id":2,
"status":0
},
{
"id":3,
"status":1
}
];
// statuses
$scope.statusList = [
{
value: 1,
status:'active',
},
{
value: 0,
status:'deactive',
}
]
$scope.format = function(val) {
return val.status + ' ' + $scope.objs.filter(function(state) { return state.status === val.value; }).length;
}
// set default status
$scope.statusFilter = $scope.statusList[1];
// get data from json
$http.get("data.json")
.then(function(response) {
var data = response.data.data;
var counts = {};
$scope.objs= data;
console.log('data is ', data);
for(var i = 0; i< data.length; i++) {
var num = data[i].status;
counts[num] = counts[num] ? counts[num]+1 : 1;
}
console.log('counts ', counts);
});
});
app.filter('myFilter', function() {
return function(objs, statusFilter) {
if (objs){
// result filtered array
var filtered = [];
// checking flat's status function
checkStatus = function(obj, status) {
if (obj.status == status) return true;
}
// checking each objs
for (var i = 0; i < objs.length; i++) {
if (checkStatus(objs[i], statusFilter.value))
filtered.push(objs[i]);
}
return filtered;
}
}
});