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ş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • PlayStation

    PlayStation

    16 Aralık 2005
  • RFS Dan

    RFS Dan

    22 Temmuz 2014
  • Sean Murphy

    Sean Murphy

    4 ŞUBAT 2009

İLGİLİ SORU / CEVAPLAR