wake-up-neo.com

ngRepeat - Begrenzung der Anzahl der angezeigten Ergebnisse

Ich bin ein riesiger AngularJS n00b und finde sogar die Tutorials schwer zu verstehen. Dieses Tutorial führt mich durch das Erstellen einer App, die Telefone anzeigt. Ich befinde mich in Schritt 5 und dachte, als Versuch würde ich versuchen, Benutzern zu erlauben, anzugeben, wie viele sie angezeigt werden möchten. Die Ansicht sieht so aus:

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

Ich habe diese Zeile hinzugefügt, in die Benutzer eingeben können, wie viele Ergebnisse angezeigt werden sollen:

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

Hier ist mein 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;
}

Die wichtige Linie ist:

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

Ich kann eine Zahl hart codieren, um darzustellen, wie viele Telefone angezeigt werden sollen. Wenn ich 5 einsetze, wird 5 angezeigt. Alles, was ich tun möchte, ist, die Zahl in dieser Eingabe aus der Ansicht zu lesen und diese in die data.splice-Zeile einzufügen. Ich habe es mit und ohne Anführungszeichen probiert und auch nicht funktioniert. Wie mache ich das?

javascriptmodel-view-controllerangularjsscope
141
Captain Stack

Etwas "Angularer" wäre die Verwendung des einfachen Filters limitTo, wie er von Angular bereitgestellt wird:

<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

338
Stewie

Etwas spät zur Party, aber das hat für mich funktioniert. Hoffentlich findet es jemand anderes nützlich.

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

speichern Sie zunächst alle Ihre Daten

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

EDIThatte die Uhr aus Versehen außerhalb des Controllers platziert, in dem sie sich befinden sollte.

2
shaunhusain

hier ist eine weitere Möglichkeit, den Filter auf HTML einzuschränken. Ich möchte zum Beispiel 3 Listen zur Zeit anzeigen, als ich limitTo: 3

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

Dies funktioniert in meinem Fall besser, wenn Sie ein Objekt oder ein mehrdimensionales Array haben. Es werden nur die ersten Elemente angezeigt, andere werden in der Schleife einfach ignoriert.

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

Ändern Sie 5 nach Ihren Wünschen.

1
fdrv

Verwenden Sie den limitTo-Filter, um eine begrenzte Anzahl von Ergebnissen in ng-repeat anzuzeigen.

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