JSFiddle - React, Tailwind, and code Playground

by Tupira

HTML

<div ng-app="myApp">
    <div class="btn-group">
	<button type="button" class="btn btn-primary" ng-click="items.data.setLetters()">All</button>
	<button type="button" class="btn btn-primary" ng-click="items.data.setLetters('a','e')">A-E</button>
	<button type="button" class="btn btn-primary" ng-click="items.data.setLetters('f','k')">F-K</button>
	<button type="button" class="btn btn-primary" ng-click="items.data.setLetters('l','p')">L-P</button>
	<button type="button" class="btn btn-primary" ng-click="items.data.setLetters('q','v')">Q-V</button>
	<button type="button" class="btn btn-primary" ng-click="items.data.setLetters('w','z')">W-Z</button>
</div>
    <ul ng-controller="ItemsController" class="nav">
        
        <input type="text" value="ItemName" ng-model="newItemName"
        placeholder="name of new item...">
            <button ng-click="addItem()">Add Me</button>
        <li ng-repeat="item in items.data | startsWithLetter:items.data.fromLetter:items.data.toLetter" id="item{{item.id}}">
            <a href="#">{{item.Name}} {{item.Surname}}</a>  <a ng-click="deleteItem($index)" class="delete-item">x</a>
        </li>
    </ul>
</div>

CSS

a {
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: #333;
}
.nav {
    list-style-type: none;
}
.nav > li {
    border: 1px solid #2987A3;
    background-color: #7ED3ED;
    padding: 3px;
    margin: 3px;
    width: 150px;
}
.nav > li:hover {
    background-color: #B1FAFA;
    color: #fff;
}
.delete-item {
    float: right;
    margin-right: 2px;
    color: #fff;
    padding: 2px 6px;
    background-color: #FC6A6A;
    border-radius: 100%;
}

JavaScript

var myApp = angular.module("myApp", []);
myApp.factory("items", function () {
    var items = {};
    items.data = [{
        id: "1",
        Name: "Belinda",
        Surname: "Bernard"
    }, {
        id: "2",
        Name: "Igor",
        Surname: "Bernard"
    }, {
        id: "3",
        Name: "Richard",
        Surname: "Bernard"
    }, {
        id: "4",
        Name: "Katie",
        Surname: "Bernard"
    }];
    return items;
});





function ItemsController($scope, items) {
    $scope.items = items;

    $scope.deleteItem = function (index) {
        items.data.splice(index, 1);
    }
    $scope.addItem = function (index) {
        items.data.push({
            Name: $scope.newItemName
        });
    }
    //filtering letters _ NOT WORKING
    function setLetters (from, to){
        this.fromLetter = from;
        this.toLetter = to;
      }
    //----
   $scope.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;
    };
});
//--filering letters
}