AngularJS fixes

by sheilak

HTML

<div ng-app="myApp">
    <div ng-controller="ItemsController" >
    <div class="btn-group">
	<button type="button" class="btn btn-primary" ng-click="setLetters()">All</button>
	<button type="button" class="btn btn-primary" ng-click="setLetters('a','e')">A-E</button>
	<button type="button" class="btn btn-primary" ng-click="setLetters('f','k')">F-K</button>
	<button type="button" class="btn btn-primary" ng-click="setLetters('l','p')">L-P</button>
	<button type="button" class="btn btn-primary" ng-click="setLetters('q','v')">Q-V</button>
	<button type="button" class="btn btn-primary" ng-click="setLetters('w','z')">W-Z</button>
</div>
    <ul 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 | filter:startsWithLetter" id="item{{item.id}}">
            <a href="#">{{item.Name}} {{item.Surname}}</a>  <a ng-click="deleteItem($index)" class="delete-item">x</a>
        </li>
    </ul>
 </div></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
        });
    }
    
    $scope.setLetters = function (from, to){
        $scope.fromLetter = from;
        $scope.toLetter = to;
      }
    //----
   $scope.startsWithLetter = function (item) {
       var firstLetter = item.Name.substring(0, 1).toLowerCase();
       if ((!$scope.fromLetter || firstLetter >= $scope.fromLetter)
           && (!$scope.toLetter || firstLetter <= $scope.toLetter)) {
           return true;
       } 
   };
//--filering letters
}