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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhA5fOz8ZjFn7zXs1kFKXFeTFqMWzyFxubauOtoNHj2GriikheNZrygwTISEcZI5UixSPlLEMvQPeAODkVHq2YhxDNI4pUGUTOXxjkWsMJgGI6J4g1c7Wnclcr2Fr-6Mid2fXRm3hi95Q/s160-Ic42/srinivas_dasari.jpg" }, { "id": "2", "name": "Srinivas Tamada", "place": "Atlanta", "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm-TqpEDLGKsrSJTxXx-bSEQ7DRurhyphenhyphenCQhxhFxXyPpk_59S37ota4-Nvs2jhWdtm3z4aVu7XxKDDZ9K8lQQ83AuUgOGVr3TSkDlmukJvGDTB7MY1kV2S7VDuKUoUaJQeuB6JKcz7P2bk/s160-Ic42/srinivas_tamada.jpg" }, { "id": "3", "name": "Sri Harsha", "place": "Hyderabad", "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK64KLM_dEvzKgVmPuCjyJQ-3Bduqq2LCftBUyQaJ79su8ZAj3yd6NHDd32Bn3zfrsOL9Xdb-5H4_aQDacTf3aqI6-8_gJiXbxtTGeroOtocuBFw0aiUltM-kaiz3zaUIxl6s_0VQaVOc/s160-Ic42/harsha.jpg" }, { "id": "4", "name": "Lokesh Raghuram", "place": "London", "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxBVfYEdbm3hJyS7HFmjroVAG_qu_B4XR95F1uppfCqlxqLs4li4fHGz6nBWAOFqwAE5GeuJMu2UvXbCvaTS8zFoyMVqGqQTnfznNK89n1xdSCzy7ae7TCOApNiPZVTUG5mr5gVEUPW4o/s160-Ic42/lokesh.jpg" }, { "id": "5", "name": "Bala Ganesh", "place": "Chennai", "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucYVyqDQD7sKpL4KEu5OkSP5uGGJ-0urrw7lNoh04H_doBcVoxE-lZn8kQaj8xmPNA8unWAFkZBUwh4FKxuEdrGx_HdZ6MH5n0liXHt-OEH8p8QB0pU85YNtab8bOrOhBBQALLqcfPno/s160-Ic42/ganesh.jpg" }, { "id": "6", "name": "Arun kumar", "place": "Visakhapatnam", "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIfGtxOwF4nXD5dOucio65HC859BhKNvxdS0FPQwdjT8wL3iw5Ch1jWNPwliE4TaTORJdfwdA1VYhOTlvHlSTrsFn5Qb10qXzztcFZK9ABQ7Gq0CFY7OLpkjByFWOpKVlE6D5WVOcE6k/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhA5fOz8ZjFn7zXs1kFKXFeTFqMWzyFxubauOtoNHj2GriikheNZrygwTISEcZI5UixSPlLEMvQPeAODkVHq2YhxDNI4pUGUTOXxjkWsMJgGI6J4g1c7Wnclcr2Fr-6Mid2fXRm3hi95Q/s160-Ic42/srinivas_dasari.jpg" }, { "id": "2", "name": "Srinivas Tamada", "place": "Atlanta", "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm-TqpEDLGKsrSJTxXx-bSEQ7DRurhyphenhyphenCQhxhFxXyPpk_59S37ota4-Nvs2jhWdtm3z4aVu7XxKDDZ9K8lQQ83AuUgOGVr3TSkDlmukJvGDTB7MY1kV2S7VDuKUoUaJQeuB6JKcz7P2bk/s160-Ic42/srinivas_tamada.jpg" }, { "id": "3", "name": "Sri Harsha", "place": "Hyderabad", "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK64KLM_dEvzKgVmPuCjyJQ-3Bduqq2LCftBUyQaJ79su8ZAj3yd6NHDd32Bn3zfrsOL9Xdb-5H4_aQDacTf3aqI6-8_gJiXbxtTGeroOtocuBFw0aiUltM-kaiz3zaUIxl6s_0VQaVOc/s160-Ic42/harsha.jpg" }, { "id": "4", "name": "Lokesh Raghuram", "place": "London", "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxBVfYEdbm3hJyS7HFmjroVAG_qu_B4XR95F1uppfCqlxqLs4li4fHGz6nBWAOFqwAE5GeuJMu2UvXbCvaTS8zFoyMVqGqQTnfznNK89n1xdSCzy7ae7TCOApNiPZVTUG5mr5gVEUPW4o/s160-Ic42/lokesh.jpg" }, { "id": "5", "name": "Bala Ganesh", "place": "Chennai", "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucYVyqDQD7sKpL4KEu5OkSP5uGGJ-0urrw7lNoh04H_doBcVoxE-lZn8kQaj8xmPNA8unWAFkZBUwh4FKxuEdrGx_HdZ6MH5n0liXHt-OEH8p8QB0pU85YNtab8bOrOhBBQALLqcfPno/s160-Ic42/ganesh.jpg" }, { "id": "6", "name": "Arun kumar", "place": "Visakhapatnam", "pic": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIfGtxOwF4nXD5dOucio65HC859BhKNvxdS0FPQwdjT8wL3iw5Ch1jWNPwliE4TaTORJdfwdA1VYhOTlvHlSTrsFn5Qb10qXzztcFZK9ABQ7Gq0CFY7OLpkjByFWOpKVlE6D5WVOcE6k/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