In this example, if user selects check boxes ( which contains places ), user data will be filtered based on those check boxes selection
JSON Data
This is users info in JSON format
$scope.userData = [{ "id": "1", "name": "Srinivas Dasari", "place": "Chennai", "pic": "https://lh3.googleusercontent.com/-nBqk0jHahk8/VnL9EvT6IPI/AAAAAAAADdU/4JB3A-1zjTM/s160-Ic42/srinivas_dasari.jpg" }, { "id": "2", "name": "Srinivas Tamada", "place": "Atlanta", "pic": "https://lh3.googleusercontent.com/-lkebnHGHGcs/VnL9E4nO_FI/AAAAAAAADdY/z2IWGONMG8E/s160-Ic42/srinivas_tamada.jpg" }, { "id": "3", "name": "Sri Harsha", "place": "Hyderabad", "pic": "https://lh3.googleusercontent.com/-x69ytvh8GkA/VnL9Dqye1jI/AAAAAAAADdM/pBDbJRX8Vxo/s160-Ic42/harsha.jpg" }, { "id": "4", "name": "Lokesh Raghuram", "place": "London", "pic": "https://lh3.googleusercontent.com/-7XM-i20j7CQ/VnL9EZnDLYI/AAAAAAAADdQ/kR99DUgRhak/s160-Ic42/lokesh.jpg" }, { "id": "5", "name": "Bala Ganesh", "place": "Chennai", "pic": "https://lh3.googleusercontent.com/-snzuBGu0CJE/VnL9DksYVSI/AAAAAAAADdA/7Y0EvQbWc7I/s160-Ic42/ganesh.jpg" }, { "id": "6", "name": "Arun kumar", "place": "Visakhapatnam", "pic": "https://lh3.googleusercontent.com/-HiQ4bqPp-fk/VnL9Dqo7u0I/AAAAAAAADdc/NqhwXqgb4Ac/s160-Ic42/arun.jpg" }];
Markup for Checkboxes
- places - This is array of place names
- exists(item, selected) - verifies whether item is there in selected
- toggle(item, selected) - adds or remove item to selected
<div ng-repeat="item in places"> <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)"> {{ item }} </md-checkbox> </div>
Markup to display User Info
- userData - contains user information
- selectedTags - custom filter to filter with array of strings
- selected - selected check boxes values in the form of array
<md-card style="width: 100%;min-height: 144px;" ng-repeat="user in userData | selectedTags:selected"> <md-card-title> <md-card-title-text> <span class="md-headline">{{user.name}}</span><br> <span class="md-subhead">{{user.place}}</span> </md-card-title-text> <md-card-title-media> <div class="md-media-md card-media"> <img src="{{user.pic}}"/> </div> </md-card-title-media> </md-card-title> </md-card>
JS Code
Find here for whole JS code
angular.module('MyApp', ['ngMaterial', 'ngMessages']) .controller('AppCtrl', function($scope, $mdSidenav) { // User Information $scope.userData = [{ "id": "1", "name": "Srinivas Dasari", "place": "Chennai", "pic": "https://lh3.googleusercontent.com/-nBqk0jHahk8/VnL9EvT6IPI/AAAAAAAADdU/4JB3A-1zjTM/s160-Ic42/srinivas_dasari.jpg" }, { "id": "2", "name": "Srinivas Tamada", "place": "Atlanta", "pic": "https://lh3.googleusercontent.com/-lkebnHGHGcs/VnL9E4nO_FI/AAAAAAAADdY/z2IWGONMG8E/s160-Ic42/srinivas_tamada.jpg" }, { "id": "3", "name": "Sri Harsha", "place": "Hyderabad", "pic": "https://lh3.googleusercontent.com/-x69ytvh8GkA/VnL9Dqye1jI/AAAAAAAADdM/pBDbJRX8Vxo/s160-Ic42/harsha.jpg" }, { "id": "4", "name": "Lokesh Raghuram", "place": "London", "pic": "https://lh3.googleusercontent.com/-7XM-i20j7CQ/VnL9EZnDLYI/AAAAAAAADdQ/kR99DUgRhak/s160-Ic42/lokesh.jpg" }, { "id": "5", "name": "Bala Ganesh", "place": "Chennai", "pic": "https://lh3.googleusercontent.com/-snzuBGu0CJE/VnL9DksYVSI/AAAAAAAADdA/7Y0EvQbWc7I/s160-Ic42/ganesh.jpg" }, { "id": "6", "name": "Arun kumar", "place": "Visakhapatnam", "pic": "https://lh3.googleusercontent.com/-HiQ4bqPp-fk/VnL9Dqo7u0I/AAAAAAAADdc/NqhwXqgb4Ac/s160-Ic42/arun.jpg" }]; // selected places $scope.selected = []; // whole places $scope.places = []; // when user clicks on checkbox, change selected list $scope.toggle = function (item, list) { var idx = list.indexOf(item); if (idx > -1) list.splice(idx, 1); else list.push(item); }; // is item exists in list $scope.exists = function (item, list) { return list.indexOf(item) > -1; }; // process user data and prepare whole places angular.forEach($scope.userData, function(user, key) { if($scope.places.indexOf(user.place) == -1) { $scope.places.push(user.place); } }); }).filter('selectedTags', function() { // filter to check array of elements return function(users, tags) { return users.filter(function(user) { if (tags.indexOf(user.place) != -1) { return true; } else if(tags.length == 0) { return true; } return false; }); }; });
how to display with static checkboxes
ReplyDeletehow can i filter this json with star(as you can see in a gmail) instead of checkbox
ReplyDelete