ngRepeat-limitar el número de resultados mostrados

Soy un gran AngularJS n00b y estoy encontrando incluso el tutoriales difícil de entender. Este tutorial me está guiando a través de la construcción de una aplicación que muestra los teléfonos. Estoy en paso 5 y pensé como un experimento que intentaría permitir a los usuarios especificar cuántos les gustaría que se les mostrara. La vista se ve así: 

<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>

He agregado esta línea para que los usuarios puedan ingresar cuántos resultados quieren mostrar: 

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

Aquí está mi controlador: 

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

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

La línea importante is: 

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

Puedo codificar en un número para representar cuántos teléfonos se deben mostrar. Si pongo 5, se mostrarán 5. Todo lo que quiero hacer es leer el número en esa entrada desde la vista y ponerlo en los datos.línea de empalme. Lo he intentado con y sin citas, y tampoco trabajo. ¿Cómo hago esto?

Author: Mosh Feu, 0000-00-00
Source

2 answers

Un poco más de "Forma Angular" sería usar el filtro sencillo limitTo, como lo proporciona Angular de forma nativa: 

<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
Author: Stewie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-06 13:06:26

Un poco tarde para la fiesta, pero esto funcionó para mí. Espero que alguien más lo encuentre útil.

<div ng-repeat="video in videos" ng-if="$index < 3">
    ...
</div>
 43
Author: couzzi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-14 16:07:39