AngularJS-jak uzyskać ngRepeat filtered result reference

Oto filtrująca wersja rozwiązania Andy ' ego Joslina.

Update: BREAKING CHANGE. Od wersji 1.3.0-beta.19 (Ten commit ) filtry nie mają kontekstu i this będą powiązane z globalnym zakresem. Możesz przekazać kontekst jako argument lub użyć nowej składni aliasingu w ngRepeat , 1.3.0-beta.17+.

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

Then in your view

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

, który daje dostęp do $scope.filteredItems.

Spróbuj czegoś takiego, problem z ng-repeat polega na tym, że tworzy zakres potomny, ponieważ nie możesz uzyskać dostępu

Filteritems

Z kontrolera

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

Update:

Nawet po 1.3.0. jeśli chcesz umieścić go w zakresie kontrolera lub rodzica, nie możesz tego zrobić za pomocą składni jako. Na przykład, jeśli mam następujący kod:

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

Powyższe będzie NIE działać. Aby go obejść, należy użyć $ parent Jako Tak:

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

Wymyśliłem nieco lepszą wersję rozwiązania Andy ' ego. W swoim rozwiązaniu ng-repeat umieszcza zegarek na wyrażeniu zawierającym przypisanie. Każda pętla digest oceni to wyrażenie i przypisze wynik do zmiennej scope.

Problem z tym rozwiązaniem polega na tym, że możesz napotkać problemy z przypisaniem, jeśli jesteś w zakresie podrzędnym. Z tego samego powodu powinieneś mieć kropkę w modelu ng .

Druga rzecz, której nie lubię w tym rozwiązaniu jest to, że ukrywa definicję filtrowanej tablicy gdzieś w znacznikach widoku. Jeśli jest używany w wielu miejscach w widoku lub kontrolerze, może być mylący.

Prostszym rozwiązaniem jest po prostu umieszczenie zegarka w kontrolerze na funkcji, która sprawia, że przypisanie:

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

Ta funkcja będzie oceniana podczas każdego cyklu fermentacji, więc wydajność powinna być porównywalna z rozwiązaniem Andy ' ego. Możesz również dodać dowolną liczbę zadań w funkcji, aby zachować je wszystkie w jedno miejsce, a nie rozrzucone wokół widoku.

W widoku wystarczy użyć filtrowanej listy bezpośrednio:

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

Oto skrzypce, gdzie jest to pokazane w bardziej skomplikowanym scenariuszu.

Sprawdź tę odpowiedź:

Wybór i dostęp do elementów w ng-repeat

<li ng-repeat="item in ..." ng-click="select_item(item)">