angular filer on click

angular filer on click - andrew pougher

by Andrew Pougher

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div ng-app="app">
    <div ng-controller="main">
        
    
        <hr>
            <div class="control-label">Activity Status:</label>
            <div class="btn-group">
 <label ng-repeat="link in links | unique :'isActive'" class= "{{link.isActive}} btn btn-xs btn-default" ng-click="filters.isActive = link.isActive">{{link.isActive}}</label>
          <label ng-click="filters.category = '';filters.isActive = ''" class="btn btn-xs btn-default btn-danger">clear filter</label>
            </div>
            <hr><!-- true gives exact match -->
        <div ng-repeat="link in links | filter:filters:true">
            <strong class='badge {{link.isActive}}'>{{link.name}}</strong>
         
        </div>
                
    </div>
</div>

CSS

body { padding: 20px; }
div, a { margin: 5px; }
.out{color:red}
.pending{color:pink}

JavaScript

var app = angular.module('app', []);

app.controller('main', function($scope) {
    $scope.filters ={ };
    
    $scope.links = [
        {name: 'Andrew', category: 'member', isActive: 'pending'},
        {name: 'Elizabeth', category: 'member', isActive: 'in'},
        {name: 'Claire', category: 'new', isActive: 'out'},
        {name: 'John', category: 'new', isActive: 'in'},
        {name: 'Drew', category: 'member', isActive: 'in'}
    ];
  //  $scope.andrews = links;
});


		app.filter('unique', function() {
    return function(input, key) {
        var unique = {};
        var uniqueList = [];
        for(var i = 0; i < input.length; i++){
            if(typeof unique[input[i][key]] == "undefined"){
                unique[input[i][key]] = "";
                uniqueList.push(input[i]);
            }
        }
        return uniqueList;
    };
});