17

ng-repeat によって生成された一連のスコープにアクセスするにはどうすればよいですか?

これの中心にあるのは、a) ng-repeat ディレクティブに渡すオブジェクトのコレクションと、b) それが生成するスコープのコレクションの間の関係がどのように機能するかをよく理解していないという事実だと思います。ng-repeatスコープが監視してピックアップする(a)をいじることができますが、スコープ自体に変数を設定するにはどうすればよいですか(b)?

私の使用例は、ng-repeat を使用して繰り返す一連の要素があり、それぞれに ng-show/ng-hide を使用して切り替えられる編集ビューがあるというものです。各要素の状態は、ローカル スコープの変数に保持されます。特定の要素で ng-show をトリガーできるようにしたいのですが、トリガーをng-repeat の外部から呼び出す必要があるため、ローカル スコープ変数にアクセスできる必要があります。

誰かが私を正しい方向に向けることができますか (または、私が間違った木を吠えているかどうか教えてください)?

ありがとう

更新: 以下のリンクは非常に役に立ちました。最後に、繰り返し要素ごとにディレクティブを作成し、ディレクティブのリンク関数を使用して、そのスコープをルート スコープのコレクションに追加しました。

4

3 に答える 3

19

これは、あなたがやろうとしていると私が思うことを行うための非常に簡単な方法です（私が似たようなことをする必要があるときにこれを見つけました）：

繰り返される各アイテムには、それに対して作成された独自のスコープがあることがわかっています。このスコープを親スコープで定義されたメソッドに渡すことができれば、プロパティの操作または追加に関して、必要なことを行うことができます。thisこれは、引数として渡すことで実行できることがわかりました。

例

// collection on controller scope
$scope.myCollection = [
  { name: 'John', age: 25 },
  { name: 'Barry', age: 43 },
  { name: 'Kim', age: 26 },
  { name: 'Susan', age: 51 },
  { name: 'Fritz', age: 19 }
];



// template view
<ul>
  <li ng-repeat="person in myCollection">
    <span ng-class="{ bold : isBold }">{{ person.name }} is aged {{ person.age }} </span>
    <button class="btn btn-default btn-xs" ng-click="toggleBold(this)">toggle bold</button>
  </li>
</ul>

したがって、「toggle bold」ボタンを押すと$scope.toggleBold()、コントローラーの $scope で定義する必要があるメソッドが呼び出されます。引数として渡すことに注意してthisください。これは実際には現在の ng-repeatscopeオブジェクトです。

したがって、このように操作できます

$scope.toggleBold = function(repeatScope) {
  if (repeatScope.isBold) {
    repeatScope.isBold = false;
  } else {
    repeatScope.isBold = true;
  }
};

これが実際の例です: http://plnkr.co/edit/Vg9ipoEP6wxG8M1kpiW3?p=preview

于 2014-04-30T09:30:43.823 に答える
1

スコープの階層内で作業する場合、$emit と $broadcast を使用してイベントをディスパッチすると非常に便利です。$emit はイベントを上向きにディスパッチするため、子スコープは親スコープに特定のイベントを通知できます。$broadcast はその逆です。

または、子スコープは親スコープのプロパティにアクセスできるため、親スコープの特定のプロパティで $watch を使用して変更をトリガーできます。

更新:子スコープへのアクセスに関しては、これはあなたにとって役立つかもしれません:親スコープが与えられたAngularjsですべての子スコープを取得する

于 2013-07-24T10:23:29.780 に答える