ngRepeat-ограничение количества отображаемых результатов

Я огромный AngularJS n00b и нахожу даже уроки трудно понять. Этот учебник проведет меня через создание приложения, которое отображает телефоны. Я на Шаг 5 и я подумал, что в качестве эксперимента я постараюсь разрешить пользователям указывать, сколько они хотели бы показать. Вид выглядит так:

<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        How Many: <input ng-model="quantity">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="span10">
        <!--Body content-->

        <ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

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

Я добавил эту строку, что пользователи могут ввести, сколько результатов они хотят показать:

How Many: <input ng-model="quantity">

вот мой контроллер:

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 'quantity');
  });

  $scope.orderProp = 'age';
  $scope.quantity = 5;
}

важная строка:

$scope.phones = data.splice(0, 'quantity');

Я могу жестко закодировать число, чтобы представить, сколько телефонов должно быть показано. Если я поставлю 5, 5 будет показано. Все, что я хочу сделать, это прочитать число в этом вводе из представления и поместить его в данные.линия соединения. Я пробовал и без кавычек, и без работы. Как мне это сделать?

2 140
javascript angularjs scope model-view-controller

2 ответа:

немного более "угловым способом" было бы использовать простой limitTo фильтр, как изначально предусмотрено Angular:

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp | limitTo:quantity">
    {{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>

app.controller('PhoneListCtrl', function($scope, $http) {
    $http.get('phones.json').then(
      function(phones){
        $scope.phones = phones.data;
      }
    );
    $scope.orderProp = 'age';
    $scope.quantity = 5;
  }
);

PLUNKER

328

немного поздно на вечеринку, но это сработало для меня. Надеюсь, кто-то еще найдет это полезным.

<div ng-repeat="video in videos" ng-if="$index < 3">
    ...
</div>
43