129

私は次のようなフィルターでng-repeatディレクティブを使用しています：

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

レンダリングされた結果をうまく見ることができます。ここで、コントローラーでその結果に対していくつかのロジックを実行したいと思います。問題は、結果アイテムの参照をどのように取得できるかということです。

アップデート：

明確にするために：オートコンプリートを作成しようとしています。次の入力があります。

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

次に、フィルタリングされた結果：

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

次に、結果をナビゲートして、アイテムの1つを選択します。

4

6 に答える 6

273

更新：これは以前よりも簡単な方法です。

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

その後$scope.filteredItems、アクセス可能です。

于 2012-07-30T13:12:36.057 に答える
30

これがAndyJoslinのソリューションのフィルターバージョンです。

更新：重大な変更。バージョン1.3.0-beta.19（このコミット）の時点では、フィルターにはコンテキストがなくthis、グローバルスコープにバインドされます。コンテキストを引数として渡すか、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);
  };
});

それからあなたの見解では

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

これにより、にアクセスできます$scope.filteredItems。

于 2013-08-09T14:56:13.667 に答える
24

このようなことを試してください。ng-repeatの問題は、アクセスできないために子スコープが作成されることです。

filteritems

コントローラから

<li ng-repeat="doc in $parent.filteritems = (docs | filter:searchitems)" ></li>
于 2015-01-11T08:56:45.803 に答える
17

アップデート：

1.3.0以降でも。コントローラまたは親のスコープに配置する場合は、構文としてそれを行うことはできません。たとえば、次のコードがある場合：

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

上記は機能しません。それを回避する方法は、$parentを次のように使用することです。

<li ng-repeat="label in ($parent.labelResults = (labels | filter:query))">
于 2016-01-07T15:06:39.340 に答える
10

Andyのソリューションのやや優れたバージョンを思いつきました。彼のソリューションでは、ng-repeatは、割り当てを含む式を監視します。各ダイジェストループはその式を評価し、結果をスコープ変数に割り当てます。

このソリューションの問題は、子スコープにいる場合に割り当ての問題が発生する可能性があることです。これは、 ng-modelにドットが必要なのと同じ理由です。

このソリューションについて私が気に入らないもう1つの点は、ビューのマークアップのどこかにフィルター処理された配列の定義が埋め込まれていることです。ビューまたはコントローラの複数の場所で使用すると、混乱する可能性があります。

より簡単な解決策は、割り当てを行う関数のコントローラーに時計を配置することです。

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

この関数は各ダイジェストサイクル中に評価されるため、パフォーマンスはAndyのソリューションと同等である必要があります。関数に任意の数の割り当てを追加して、ビューに散在するのではなく、すべてを1か所に保持することもできます。

ビューでは、フィルタリングされたリストを直接使用します。

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

これは、これがより複雑なシナリオで示されているフィドルです。

于 2014-12-17T15:21:55.213 に答える
-2

この答えを確認してください：

ng-repeatのアイテムの選択とアクセス

<li ng-repeat="item in ..." ng-click="select_item(item)">
于 2016-02-25T19:07:32.983 に答える