Angular Filter

by sheilak

HTML

<div ng-app="app">
  <div class="container" ng-controller="PersonCtrl as person">
    <button type="button" class="btn btn-primary" ng-click="person.setLetters()">All</button>
    <button type="button" class="btn btn-primary" ng-click="person.setLetters('a','e')">A-E</button>
    <button type="button" class="btn btn-primary" ng-click="person.setLetters('f','k')">F-K</button>
    <button type="button" class="btn btn-primary"ng-click="person.setLetters('l','p')">L-P</button>
    <ul>
      <li ng-repeat="friend in person.friends | startsWithLetter:person.fromLetter:person.toLetter">
        {{ friend }}
      </li>
    </ul>
  </div>
</div>

JavaScript

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

app.controller('PersonCtrl', function () {
    this.setLetters = function(from, to){
      this.fromLetter = from;
      this.toLetter = to;
    };
    this.friends = [{
        name: 'Andrew'
    },
    {
        name: 'Bob'
    },{
        name: 'Beano'
    },{
        name: 'Chris'
    }, {
        name: 'Will'
    }, {
        name: 'Mark'
    }, {
        name: 'Alice'
    }, {
        name: 'Todd'
    }];
});
  app.filter('startsWithLetter', function () {
      return function (items, fromLetter, toLetter) {
          var filtered = [];
          for (var i = 0; i < items.length; i++) {
              var item = items[i];
              var firstLetter = item.name.substring(0, 1).toLowerCase();
              if ((!fromLetter || firstLetter >= fromLetter)
                  && (!toLetter || firstLetter <= toLetter)) {
                  filtered.push(item);
              }
          }
          return filtered;
      };
  });