現在AngularJSを使用していますが、現在のプロジェクトでは、table1(ユーザーがボタンをクリックした場所)から2番目のテーブルに行を追加する必要があります。これに加えて、ボタンは $http.post(...) も実行する必要があります。
だから私が得たのは、ng-repeat によって入力されたデータを含むテーブルであり、td の 1 つに、$http.post で関数を実行する ng-click ディレクティブを含むボタンがあります。
html:
<table id="tableOne">
<thead>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th></th>
</thead>
<tbody id="source">
<tr ng-cloak ng-repeat="person in persons">
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td><button ng-click="movePerson(person.id)">Move to 2nd Table</button></td>
</tr>
</tbody>
</table>
ボタンをクリックすると、コントローラーの関数「movePerson(person.id)」が呼び出され、正常に動作します。
コントローラ:
$scope.movePerson = function ( id ) {
DataService.movePerson( id, { result: function ( data, status ) {
if( data.success === true )
{
$log.log( "person has been moved" );
}
}, fault: function ( data, status ) {
$log.log( "an error has occured" );
} } );
};
「DataService」が $http リクエストを処理しています。
ここで、ボタンがクリックされたテーブル行を、tbody id="target" を使用して別のテーブル (id="tableTwo") に移動したいと考えています。コントローラーでjQueryを使用しないでください..これを行うための「角度のある方法」はありますか?プロジェクトにjQueryをまったく含めたくないからです。
このようなものにはディレクティブを使用すると思ったので、次のように「ng-click」のようにボタンタグにディレクティブを追加できます。
<td><button ng-click="movePerson(person.id)" move-tbl-row>Move to 2nd Table</button></td>
しかし、私はAngularが初めてなので、ディレクティブがどのように見えるかわかりません。そして、「ng-click」はまだ実行されますか?
ご挨拶と感謝。