JSFiddle - React, Tailwind, and code Playground

by Daviloppeur

HTML

<div ng-app="app">
    <div ng-controller="PersonCtrl as person">
        <input type="text" ng-model="letter" placeholder="Enter a letter to filter">
        <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) {
        alert(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: 'Will'
    }, {
        name: 'Mark'
    }, {
        name: 'Alice'
    }, {
        name: 'Todd'
    }];
});