1

次のようなjQueryを使用して、既存のテーブルに動的に追加できるテーブル行があります。

$("#add-item").click(function(){
    var itemRow = "<tr><td><span contenteditable='true'><a href='#'>Edit me<a/></span></td></tr>";
    $("#job-table").hide(0).append(itemRow).fadeIn(500);
});

また、次のように Angular で実行できるデータ バインディングもいくつかあります。

<div>
    <input type="text" ng-model="data.message">
    <h1>{{data.message}}</h1>
</div>

私が欲しいのは、次のようなものです。

$("#add-item").click(function(){
    var itemRow = "<tr><td><span contenteditable='true'><a href='http://something.com/{{content.url}}'>content.url<a/></span></td></tr>";
    $("#job-table").hide(0).append(itemRow).fadeIn(500);
});

問題は、ロード時に利用できないため、angular がこの動的にロードされた要素にアクセスできないことです。

これを達成するための最良の方法は何ですか？

4

1 に答える 1

5

これを達成する最善の方法は、jQuery について知っていることをすべて忘れることです。「アイテム」配列をスコープに入れ、ng-repeat.

疑似コード:

<tr ng-repeat = "item in items">
<td><span contenteditable='true'><a ng-href='http://something.com/{{item.url}}'>item.url<a/></span></td>
</tr>

を使用ng-clickして、items 配列へのアイテムの追加をトリガーすると、準備完了です。jQuery は必要ありません。のように単純にすることもでき、<button ng-click="items.push({url:'what'})">add</button>自動的に表示されます。

ここにフィドルがあります：http://jsfiddle.net/VEbsU/1/は完全な例を示しています

于 2013-10-21T19:10:11.027 に答える