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

  • Alfredo Garcia

    Alfredo Garc

    25 Mayıs 2007
  • Benjamin Heckendorn

    Benjamin Hec

    4 Mayıs 2008
  • knopik96

    knopik96

    7 Mayıs 2011

İLGİLİ SORU / CEVAPLAR