Puedo encontrar el AngularJS tutoriales difícil de entender; este es caminar conmigo 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 me gustaría probar para permitir a los usuarios especificar cuántos les gustaría ser demostrado. La vista se parece a esto:

<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 añadido esta línea donde los usuarios pueden introducir el número de resultados que ellos quieren que se muestra:

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 más importante es:

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

Puedo codificar un número para representar el modo en que muchos de los teléfonos deben ser demostrado. Si pongo 5 en, 5 se muestra. Todo lo que quiero hacer es leer el número en la entrada de la vista, y puesto que en el data.splice línea. He probado con y sin comillas, y ni el trabajo. ¿Cómo puedo hacer esto?

7 Comentarios

  1. 341

    Un poco más «Angular» de manera sería utilizar el sencillo limitTo filtro, ya que de forma nativa proporcionada por Angulares:

    <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

    • Vale la pena señalar – y salvar a alguien de un par de minutos – que si usted está utilizando «pista» DEBE ser la última después de los filtros.
    • Hay una manera de obtener el número de elementos disponibles cuando se utiliza el filtro y limitTo? Me gustaría usar limitTo sino que proporcionan un «cargar más» botón para aumentar el límite. Esto debe ser sólo aparece si hay más registros disponibles.
    • Pruebe esta solución: stackoverflow.com/a/19665313/1095616
    • ¿Qué es filter:query ?
    • por el OP pregunta, query viene de Search: <input ng-model="query">
    • la respuesta perfecta!!! +1 me alegró el día 🙂

  2. 45

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

    <div ng-repeat="video in videos" ng-if="$index < 3">
        ...
    </div>
    • Sospecho que esto sería menos eficiente que el uso de limitToFilter si es una matriz de gran tamaño, debido a que cada elemento presumiblemente ha de ser evaluado
    • Tuve un escenario en el que yo quería mostrar a los 6 elementos de una copia de la matriz de mucho más. El uso de ng-if="$index < 6" me permitió mostrar sólo los 6 primeros, mientras que el mantenimiento de toda la matriz de búsqueda (tengo un filtro combinado con un campo de búsqueda).
    • No es límite, es ocultar todo el resultado si el recuento de más de 3.
    • No, ng-if, en este caso, no va a representar el elemento de DOM de la repetidor cuya $index es mayor que 3. si $index en el repetidor es 0, 1, or 2, la condición es true y nodos DOM se crean. ng-if difiere de ng-hide en el sentido de que los elementos se no agregado a la DOM.
  3. 2

    almacenar todos sus datos inicialmente

    function PhoneListCtrl($scope, $http) {
      $http.get('phones/phones.json').success(function(data) {
        $scope.phones = data.splice(0, 5);
        $scope.allPhones = data;
      });
    
      $scope.orderProp = 'age';
      $scope.howMany = 5;
      //then here watch the howMany variable on the scope and update the phones array accordingly
      $scope.$watch("howMany", function(newValue, oldValue){
        $scope.phones = $scope.allPhones.splice(0,newValue)
      });
    }

    EDITAR había accidentalmente poner el reloj fuera el controlador debería haber estado en el interior.

  4. 2

    aquí es anaother manera de limitar el filtro en html, por ejemplo yo quiero 3 visualización de la lista en el momento que voy a utilizar limitTo:3

      <li ng-repeat="phone in phones | limitTo:3">
        <p>Phone Name: {{phone.name}}</p>
      </li>
  5. 1

    Esto funciona mejor en mi caso, si usted tiene objeto o una matriz multidimensional. Se muestra sólo los artículos primero, otros serán simplemente ignoradas en bucle.

    .filter('limitItems', function () {
      return function (items) {
        var result = {}, i = 1;
        angular.forEach(items, function(value, key) {
          if (i < 5) {
            result[key] = value;
          }
          i = i + 1;
        });
        return result;
      };
    });

    Cambio 5 en lo que usted desea.

  6. 0

    Uso limitTo filtro para mostrar un número limitado de resultados en ng-repeat.

    <ul class="phones">
          <li ng-repeat="phone in phones | limitTo:5">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
          </li>
    </ul>
  7. -3

    Otro (y creo que mejor) manera de lograr esto es en realidad interceptar los datos. limitTo está bien, pero lo que si usted está limitando a 10 cuando la matriz contiene miles?

    Al llamar a mi servicio, yo simplemente hice esto:

    TaskService.getTasks(function(data){
        $scope.tasks = data.slice(0,10);
    });

    Esta límites de lo que se envía a la vista, por lo que debe ser mucho mejor rendimiento que hacer esto en el front-end.

    • La implementación de limitTo usos de la matriz.slice() de todos modos, cualquier diferencia en el tamaño de la matriz debe tener la misma diferencia en el rendimiento como hacerlo usted mismo. github.com/angular/angular.js/blob/master/src/ng/filter/…
    • pero limitTo en realidad no limitar los datos enviados a la vista, mientras que hacerlo de esta manera. He probado a utilizar la consola.log().
    • Sí, lo que están haciendo es exponer a una nueva matriz a la vista (yo no piense en ello como ‘enviar’ cualquier cosa en cualquier lugar). Si sólo estaban interesados en los 10 primeros elementos de datos, y los datos no se hace referencia en cualquier otro lugar, haciendo de esta manera se podría reducir la huella en la memoria (suponiendo que los datos pueden ser recolector de basura). Pero si usted todavía mantener una referencia a data alrededor, esto no es más eficiente que el uso de limitTo.

Dejar respuesta

Please enter your comment!
Please enter your name here