Angular JS Magazine

sâmbătă, 20 septembrie 2014

Limiting the Number of Items

This tip shows you how to use the Angular limitTo built-in filter for limiting the number of items:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
</head>
<body>
<div ng-app="" ng-init="atp=[
     { name: 'Nadal, Rafael (ESP)', rank: 1 },
     { name: 'Djokovic, Novak (SRB)', rank: 2 },
     { name: 'Federer, Roger (SUI)', rank: 3 },
     { name: 'Wawrinka, Stan (SUI)', rank: 4 },
     { name: 'Ferrer, David (ESP)', rank: 5 },
     { name: 'Raonic, Milos (CAN)', rank: 6 },
     { name: 'Berdych, Tomas (CZE)', rank: 7 },
     { name: 'Nishikori, Kei (JPN)', rank: 8 },
     { name: 'Cilic, Marin (CRO)', rank: 9 },
     { name: 'Dimitrov, Grigor (BUL)', rank: 10 }
     ]; limitRange=10;">

    <div class="panel-body">
        Show the first
        <select ng-model="limitRange">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        players:
    </div>

    <div id="atpPanel" class="panel">
        <h3 class="panel-header">ATP SINGLES RANKINGS</h3>
        <table class="table">
            <thead>
            <tr>
                <th>Rank</th>
                <th>Name</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in atp | limitTo:limitRange">
                <td>{{item.rank}}</td>
                <td>{{item.name}}</td>
            </tr>
            </tbody>
        </table>

    </div>
</div>
</body>
</html>


The limitTo filter will also operate on string values, treating each character as an object in an array.
You don’t have to worry about going out of bounds. The limitTo filter will return all of the objects in the array if you specify a number that is greater than the size of the array.