ngRipetizione - numero limite di risultati visualizzati

131

Sono un enorme AngularJS n00b e sto trovando persino il tutorials difficile da capire. Questo tutorial mi sta guidando attraverso la creazione di un'app che visualizza i telefoni. Sono a step 5 e ho pensato di provare a consentire agli utenti di specificare quante persone vorrebbero mostrare. Il punto di vista è simile al seguente:ngRipetizione - numero limite di risultati visualizzati

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

Ho aggiunto questa linea che gli utenti possono inserire il numero di risultati che vogliono mostrati:

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

Ecco il mio controller:

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

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

L'importante linea è:

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

Posso inserire hard-code in un numero per indicare quanti telefoni devono essere mostrati. Se inserisco 5 in, verrà mostrato 5. Tutto quello che voglio fare è leggere il numero in quell'input dalla vista e metterlo nella riga data.splice. Ho provato con e senza virgolette, e non funziona. Come faccio a fare questo?

fonte

2013-07-14 Captain Stack

315

Leggermente più "modo angolare" sarebbe quella di utilizzare il semplice limitTo filtro, come nativo fornito da 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

fonte

2013-07-14 21:07:42 Stewie

+43

Vale la pena sottolineare - e salvare qualcun altro pochi minuti - che se si sta utilizzando "traccia" Dev'essere scorso dopo i filtri. –

C'è un modo per ottenere il numero di articoli disponibili quando si utilizza il filtro e limitTo? Vorrei usare 'limitTo', ma fornire un pulsante" carica di più "per aumentare il limite. Questo dovrebbe essere visualizzato solo se sono disponibili più record. –

@ TimBüthe Prova questa soluzione: http://stackoverflow.com/a/19665313/1095616 – Stewie

memorizzare tutti i dati inizialmente

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) 
    }); 
}

EDIT avevano accidentalmente mettere l'orologio al di fuori del controllo avrebbe dovuto essere all'interno.

fonte

2013-07-14 20:32:19 shaunhusain

Un po 'in ritardo alla festa, ma questo ha funzionato per me. Spero che qualcun altro lo trovi utile.

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

fonte

2014-02-14 16:07:39 couzzi

Sospetto che sarebbe meno efficiente dell'utilizzo di limitToFilter se si tratta di un array di grandi dimensioni, poiché ogni elemento deve presumibilmente essere valutato – rom99

Avevo uno scenario in cui volevo mostrare 6 elementi da un array di supporto di molto altro. L'uso di 'ng-if =" $ index <6 "' mi ha permesso di mostrare solo i primi 6 mantenendo l'intero array ricercabile (ho un filtro combinato con un campo di ricerca). –

Non è un limite, è nascosto l'intero risultato se conta più di 3. 3. – fdrv

-3

Altro (e penso meglio) modo per raggiungere questo obiettivo è quello di intercettare in realtà i dati. limitTo va bene, ma cosa succede se stai limitando a 10 quando il tuo array contiene effettivamente migliaia?

Quando si chiama il mio servizio ho semplicemente fatto questo:

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

Questo limita ciò che viene inviato alla vista, quindi dovrebbe essere molto meglio per le prestazioni di fare questo sul front-end.

fonte

2015-08-05 15:36:54

L'implementazione di limitTo utilizza array.slice() in ogni caso, qualsiasi differenza nella dimensione dell'array dovrebbe avere la stessa differenza sulle prestazioni rispetto a se stessi. https://github.com/angular/angular.js/blob/master/src/ng/filter/limitTo.js – rom99

ma limitTo in realtà non limita i dati inviati alla vista, mentre lo fa in questo modo. Ho provato questo usando console.log(). –

Sì, quello che stai facendo è esporre un nuovo array alla vista (non penserei davvero che invii qualcosa ovunque). Se ti interessano solo i primi 10 elementi nei dati, e i dati non sono referenziati da nessun'altra parte, farlo in questo modo potrebbe ridurre l'ingombro della memoria (supponendo che i dati possano essere raccolti inutilmente). Ma se si sta ancora mantenendo un riferimento a 'data' in giro, questo non è più efficiente dell'utilizzo di limitTo. – rom99

Questo funziona meglio nel mio caso se si dispone di una matrice oggetto o multidimensionale. Mostrerà solo i primi elementi, altri saranno semplicemente ignorati in loop.

.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; 
    }; 
});

Cambia 5 in quello che vuoi.

fonte

2016-04-01 22:48:45 fdrv

Utilizzare il filtro limitTo per visualizzare un numero limitato di risultati in ng-repeat.

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

fonte

2017-11-17 12:43:01

ngRipetizione - numero limite di risultati visualizzati

risposta

Problemi correlati