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

  1. places - This is array of place names
  2. exists(item, selected) - verifies whether item is there in selected
  3. 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

  1. userData - contains user information
  2. selectedTags - custom filter to filter with array of strings
  3. 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;

        });
    };
});

2 comments:

  1. how to display with static checkboxes

    ReplyDelete
  2. how can i filter this json with star(as you can see in a gmail) instead of checkbox

    ReplyDelete

Blogroll

Popular Posts