JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="App">
<div ng-controller="HomeCtrl">
<li>
<p>By Member Status</p>
<p>
<label>
<input type="checkbox" ng-model="filter.admin">
Administrator
</label>
</p>
<p>
<label>
<input type="checkbox" ng-model="filter.lead">
Lead
</label>
</p>
</li>
<li>
<p>By ADMIN Status</p>
<select ng-model="filter.selectedSearch" ng-options="value for (key, value) in filterAdmin">
</select>
</li>
<div ng-repeat="item in mylist | filter:filterByCategory">
<div class="col-md-4 col-sm-4 name">
<img src="images/thumbnail.jpg">
<p>{{item.name}}
</p>
</div>
<div class="col-md-2 col-sm-2">{{item.title}}</div>
</div>
</div>
</div>
JavaScript
angular.module('App',[])
.controller('HomeCtrl', ['$scope', function($scope){
$scope.mylist = [ {
"title":"Executive",
"email":"[email protected]",
"roles":[
"Admin"
],
"userStatus":"lead",
"name":"jackie, chain"
},
{
"title":"Admin",
"email":"[email protected]",
"userStatus":"admin",
"roles":[
"User"
],
"name":"World, Tiger"
},{
"title":"Executive",
"email":"[email protected]",
"userStatus":"admin",
"roles":[
"User",
"Admin"
],
"name":"Name, Few"
}];
$scope.filterAdmin = ["Default","User","Admin"];
$scope.filter = {
administrator: false,
lead: false,
selectedSearch: 'Default'
}
$scope.filterByCategory = function (stat) {
return stat.userStatus in $scope.filter ? $scope.filter[stat.userStatus] : $scope.filter[stat.roles];
};
}])