JSFiddle - React, Tailwind, and code Playground

by Roman Fedytskyi

HTML

<div ng-app="app">
  <div ng-controller="PersonCtrl as person">
    <input type="text" ng-model="letter" placeholder="Enter a letter to filter">
    <button ng-click="letter='[AB]'">A-B</button>
    <button ng-click="letter='[CD]'">C-D</button>
    <button ng-click="letter='[EF]'">E-F</button>

    <ul>
      <li ng-repeat="friend in person.friends | startsWithLetter:letter">
        {{ friend }}
      </li>
    </ul>
  </div>
</div>

CSS

</style> <script src="//code.angularjs.org/1.3.0-beta.7/angular.js"></script> <style>

JavaScript

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

app.filter('startsWithLetter', function() {
  return function(items, letter) {
    var filtered = [];
    var letterMatch = new RegExp(letter, 'i');
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (letterMatch.test(item.name.substring(0, 1))) {
        filtered.push(item);
      }
    }
    return filtered;
  };
});

app.controller('PersonCtrl', function() {
  this.friends = [{
    name: 'Andrew'
  }, {
    name: 'Baldo'
  }, {
    name: 'Carlo'
  }, {
    name: 'Delo'
  }, {
    name: 'Emman'
  }, {
    name: 'Ferman'
  }];
});