web-dev-qa-db-ja.com

Angularのng-repeatループに親スコープの値を渡します

これは非常に単純な質問ですが、私が見つけた回避策はすべて複雑です。私は次のようにテンプレートでng-repeatを使用してオブジェクトの配列をループしています：

<div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> 
    {{ message.subject }} ... {{ campaign.name }} ...
</div>

Ng-repeatは新しいスコープを作成するため、コントローラーからの「キャンペーン」オブジェクトにはアクセスできないようです。その値を取得する方法はありますか（配列内のすべてのアイテムにキャンペーンオブジェクトを追加する以外に）。

前もって感謝します。

javascriptangularjsangular-template
45
Wandering Digital

$ parentを使用して親スコープにアクセスできます

<div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> 
    {{ message.subject }} ... {{ $parent.campaign.name }} ...
</div>
75
Mathew Berg

別の方法は、親スコープをスコープ変数としてディレクティブに渡すことです。

<my-directive 
    md-parent-scope="this" 
    ng-repeat="item in items"></my-directive>

少し面倒ですが、親が実際に何であるかをより詳細に制御でき、何でも渡すことができます。

3
marksyzm

これは、_$parent_を使用しない方法です。ネストされたスコープを上方に検索して、使用しているオブジェクトを見つけますが、多くのスコープを通過する必要があります。

リストを含むスコープでは、次のように、リストとしてプロパティとしてオブジェクトを定義できます。

_$scope.obj = {};
$scope.obj.items = ['item1','item2','item3'];
_

次に、_ng-repeat_を次のようにします。

_<div ng-repeat="item in obj.items | filter:'item3' track by $index">
    {{obj.items[ obj.items.indexOf(item) ]}}
</div>
_

（_obj.items[ $index ]_は元のフィルターではなくフィルターされた配列のインデックスであるため、_$index_ではなくobj.items[ obj.items.indexOf(item) ]を使用する必要があります）

これが機能する理由は、objが現在のスコープに存在しない間、そのプロパティにアクセスしようとすると、Angularは現在のスコープよりも上に表示されるためです。エラー（_{{obj}}_を試しただけでは未定義になり、Angularはより高いスコープを調べる代わりに何も与えないことになります）。これはネストに関する有用なリンクですスコープ： http://www.angularjshub.com/examples/basics/nestedcontrollers/

私の場合、配列の項目にバインドされた_track by $index_の入力があり、モデルが更新されるたびに、HTMLが再作成されていると思うので入力がぼやけるため、_ng-model_が必要でした。レンダリングされます。 _track by $index_を使用すると、配列内の同じ値を持つアイテムが繰り返されます。最初のもの以外を変更すると、奇妙なことが起こります。たぶんあなたはそれを避けるために一意性のためにフィルタリングすることができます。

私はAngularJSに比較的慣れていないので、足りないものがあればコメントしてください。しかし、これは機能するので、少なくとも私はそれを使用しています。

3
Michael Pearson