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

  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://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;

        });
    };
});

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