398

ng-repeat次のような単純なループがあります。

<li ng-repeat='task in tasks'>
  <p> {{task.name}}
  <button ng-click="removeTask({{task.id}})">remove</button>
</li>

コントローラーには機能があります$scope.removeTask(taskID)。

私が知る限り、Angular は最初にビューをレンダリングし、補間{{task.id}}された値を数値に置き換えてから、クリック イベントでng-click文字列を評価します。

この場合ng-click、完全に期待どおりの結果が得られます。つまり:ng-click="removeTask(5)".ただし... 何もしていません。

もちろんtask.id、$tasks配列や DOM から取得するコードを書くこともできますが、これは Angular の方法とは思えません。

では、ループng-click内のディレクティブに動的コンテンツを追加するにはどうすればよいでしょうか?ng-repeat

4

7 に答える 7

754

それ以外の

<button ng-click="removeTask({{task.id}})">remove</button>

これを行う：

<button ng-click="removeTask(task.id)">remove</button>

このフィドルを見てください：

http://jsfiddle.net/JSWorld/Hp4W7/34/

于 2013-06-11T08:49:39.577 に答える
53

私が本当に電話を切ったのは、ブラウザーでこの html を調べたときでした。

<button ng-click="removeTask(1234)">remove</button>

私が見た：

<button ng-click="removeTask(task.id)">remove</button>

ただし、後者は機能します！

これは、「Angular World」にいるためです。ng-click="" の内部では、モデルの内部にいるため、Angular はすべて task.id を認識しています。{{}} のように、データ バインディングを使用する必要はありません。

さらに、タスク オブジェクト自体を渡したい場合は、次のようにします。

<button ng-click="removeTask(task)">remove</button>
于 2014-03-21T19:45:59.680 に答える
10

検索でこれを見つけた人にとっては、これも注目に値します...

<div ng-repeat="button in buttons" class="bb-button" ng-click="goTo(button.path)">
  <div class="bb-button-label">{{ button.label }}</div>
  <div class="bb-button-description">{{ button.description }}</div>
</div>

の値に注意してくださいng-click。に渡されるパラメーターgoTo()は、バインディング オブジェクト ( button) のプロパティからの文字列ですが、引用符で囲まれていません。AngularJS がそれを処理してくれるようです。私はそれに数分間夢中になりました。

于 2014-09-26T04:27:07.390 に答える