Question

我目前正在与AngularJS合作，在我目前的项目中，我必须从table1（用户点击按钮）中追加一行到第二个表。除此之外，该按钮还必须执行$ http.post（...）。

所以我得到的是一个表格，其中的数据由ng-repeat填充，其中一个td＆＃39; si有一个带有ng-click指令的按钮，该指令执行带有$ http.post的函数。

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>

当我点击按钮时，我的控制器中的函数＆＃34; 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" );
    } } );
};

＆＃39;的DataService＆＃39;正在处理我的$ http请求。

现在我想将按钮被点击的tablerow移动到另一个表（id =＆＃34; tableTwo＆＃34;），其中tbody id =＆＃34; target＆＃34;。我已经读过你不应该在你的控制器中使用jQuery ..所以有一个＆＃34;角度方式＆＃34;去做这个？因为我想在我的项目中根本不包含jQuery。

我认为你会使用指令来做这些事情，所以你可以在按钮标签中添加指令，如＆＃34; ng-click＆＃34;像这样：

<td><button ng-click="movePerson(person.id)" move-tbl-row>Move to 2nd Table</button></td>

但是因为我是Angular的新手，所以我不知道我的指令会是什么样子。并且＆＃34; ng-click＆＃34;还是会被执行吗？

Geetings and Thanks。

Answer 1

你问的是如何移动行......像jQuery一样思考....实际上你想要改变数据对象所在的数组。

这是对你的一点修改。

<!-- pass whole object into scope function -->
<button ng-click="movePerson(person)">Move to 2nd Table</button>

$scope.movePerson = function ( person ) {
   var id= person.id;
    /* on ajax success, remove from persons array */
    var idx= $scope.persons.indexOf(person);
    $scope.persons.splice(idx,1);
    /* add person object to another scope array*/
     $scope.another_array.push(person);


})

AngularJS指令将一个tablerow从一个表追加到另一个表

1 个答案: