Using the Index in an ng-repeat

Shows the difference between deleting an object by $index rather than passing the object to get the index.

by Rob Rothe

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="usersApp" ng-controller="UsersCtrl">
    <table class="table">
        <tr ng-repeat="user in users | orderBy:'first'">
            <td>{{user.first}} {{user.last}}</td>
            <td>
                <button ng-click="deleteByIndex($index)" class="btw btn-link">Delete By Index</button>
            </td>
            <td>
                <button ng-click="deleteUser(user)" class="btw btn-link">Delete By User</button>
            </td>
            <td>
                <button ng-click="selectByIndex($index)" class="btw btn-link">Select By Index</button>
            </td>
        </tr>
    </table>
    <hr>you selected: {{user.first}} {{user.last}}</div>

JavaScript

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

app.controller('UsersCtrl', function ($scope) {
    $scope.users = [{
        first: 'Lita',
        last: 'Ford'
    }, {
        first: 'Yngwie',
        last: 'Malmsteen'
    }, {
        first: 'King',
        last: 'Diamond'
    }];

    $scope.selectByIndex = function (index) {
        $scope.user = $scope.users[index];
    };

    $scope.deleteByIndex = function (index) {
        $scope.users.splice(index, 1);
    };

    $scope.deleteUser = function (user) {
        var index = $scope.users.indexOf(user);
        $scope.users.splice(index, 1);
    };
});