ngRepeat - sayı görüntülenen sınırlayıcı sonuçlar

SORU

14 Temmuz 2013, Pazar

ngRepeat - sayı görüntülenen sınırlayıcı sonuçlar

Büyük AngularJS bir n00b değilim ve hatta tutorials anlamak zor bulma yaşıyorum. Bu öğretici telefonları görüntüleyen bir uygulama bina boyunca benimle yürüyor. step 5 ve kullanıcıların kaç gösterilmesini istiyorlar belirtmek için izin için denemek istiyorum bir deneme olarak düşündüm. Görünümü şu şekildedir:

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

Kullanıcılar gösterilen istiyorlar nasıl girebileceği bu satırı ekledim:

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

İşte benim denetleyicisi:

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

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

Önemli satırı: kapsam. $telefon = veri.(0, '') miktar; . ekleme

Sabit kod birçok telefon gösterildiği nasıl olması gerektiğini göstermek için bir dizi olabilir. 5 5 gösterilecektir koydum. Tek istediğim görünümünden giriş sayısı okuma ve veri koy.birleşme çizgisi. Ve tırnak işaretleri olmadan denedim, hiçbiri işe. Bunu nasıl yapabilirim?

CEVAP

14 Temmuz 2013, Pazar

Biraz "Açısal yol" limitTo basit filtre kullanmak için, doğal Açısal sağladığı gibi olur: . Daha fazla

<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

Bunu Paylaş: