web-gelistirme-sc.com

AngularJS - ngRepeat filtrelenmiş sonuç referansı nasıl alınır

Bu şekilde filtreli bir ng-repeat yönergesi kullanıyorum:

ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4"

ve oluşturulan sonuçları iyi görebiliyorum; şimdi kontrol cihazımda bu sonuç üzerine bir mantık çalıştırmak istiyorum. Asıl soru, sonuç öğeleri referansını nasıl alabilirim?

Güncelleme:


Sadece netleştirmek için: Bir otomatik tamamlama oluşturmaya çalışıyorum, şu girişi var:

<input id="queryInput" ng-model="query" type="text" size="30" placeholder="Enter query">

ve sonra filtrelenmiş sonuçlar:

<ul>
   <li  ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4">{{item.name}}</li>
</ul>

şimdi sonuçta gezinmek ve öğelerden birini seçmek istiyorum.

125
Shlomi Schwartz

UPDATE: İşte daha önce olduğundan daha kolay bir yol.

 <input ng-model="query">
 <div ng-repeat="item in (filteredItems = (items | orderBy:'order_prop' | filter:query | limitTo:4))">
   {{item}}
 </div>

Sonra $scope.filteredItems erişilebilir.

265
Andrew Joslin

İşte Andy Joslin'in çözümünün filtre versiyonu.

Güncelleme: KIRMA DEĞİŞİMİ. 1.3.0-beta.19 sürümünden itibaren ( bu işleme ) filtrelerin bir bağlamı yoktur ve this global kapsamına bağlanır. Bağlamı argüman olarak iletebilir veya yeni takma ad sözdizimini ngRepeat , 1.3.0-beta.17 + 'da kullanabilirsiniz.

// pre 1.3.0-beta.19
yourModule.filter("as", function($parse) {
  return function(value, path) {
    return $parse(path).assign(this, value);
  };
});

// 1.3.0-beta.19+
yourModule.filter("as", function($parse) {
  return function(value, context, path) {
    return $parse(path).assign(context, value);
  };
});

Sonra senin görüşünde

<!-- pre 1.3.0-beta.19 -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:'filteredItems'">
 {{item}}
</div>

<!-- 1.3.0-beta.19+ -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:this:'filteredItems'">
 {{item}}
</div>

<!-- 1.3.0-beta.17+ ngRepeat aliasing -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 as filteredItems">
 {{item}}
</div>

Bu size $scope.filteredItems erişimini sağlar.

30
kevinjamesus86

Böyle bir şey dene, ng-yinenin sorunu, erişemeyeceğin için çocuk kapsamı yaratması.

filteritems

denetleyiciden

<li ng-repeat="doc in $parent.filteritems = (docs | filter:searchitems)" ></li>
23

Güncelleme:

1.3.0'dan sonra bile. denetleyicinin kapsamına veya ana öğeye koymak istiyorsanız, bunu as sözdizimi ile yapamazsınız. Örneğin, aşağıdaki kod varsa:

<div>{{labelResults}}</div>
<li ng-repeat="label in (labels | filter:query | as labelResults)">
</div>

yukarıdaki değil iş olacaktır. Etrafta dolaşmanın yolu $ parent 'u kullanmak:

<li ng-repeat="label in ($parent.labelResults = (labels | filter:query))">
15
Gal Bracha

Andy'nin çözümünün biraz daha iyi bir versiyonunu buldum. Çözümünde ng-repeat, ödevi içeren ifadeye bir saat yerleştirir. Her özet döngüsü bu ifadeyi değerlendirir ve sonucu kapsam değişkenine atar.

Bu çözümle ilgili sorun, bir çocuk kapsamı içindeyseniz atama sorunlarıyla karşılaşmanızdır. Bu, neden bir ng-modelinde nokta olması gereken aynı nedendir.

Bu çözümden hoşlanmadığım bir diğer şey, filtre uygulanmış dizinin tanımını görünüm işaretlemesinin herhangi bir yerine gömdüğü. Görünümünüzde veya kontrol cihazınızda birden fazla yerde kullanılıyorsa, kafa karıştırıcı olabilir.

Daha basit bir çözüm, kumandayı atama yapan bir işleve sadece bir saat yerleştirmektir:

$scope.$watch(function () {
    $scope.filteredItems = $scope.$eval("items | orderBy:'order_prop' | filter:query | limitTo:4");
});

Bu fonksiyon her bir döngü döngüsü boyunca değerlendirilecektir, bu nedenle performans Andy'nin çözümüyle karşılaştırılmalıdır. Ayrıca, görünüme dağılmış değil, hepsini tek bir yerde tutmak için fonksiyona istediğiniz sayıda atama ekleyebilirsiniz.

Görünümde, doğrudan filtrelenmiş listeyi kullanırsınız:

<ul>
    <li  ng-repeat="item in filteredItems">{{item.name}}</li>
</ul>

İşte bunun daha karmaşık bir senaryoda gösterdiği bir keman.

10
Dave Johnson