0

現在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」はまだ実行されますか?

ご挨拶と感謝。

4

1 に答える 1