0

我目前正在使用AngularJS，在我当前的项目中，我必须将table1（其中一个按钮被用户单击）中的一行附加到第二个表中。除此之外，该按钮还必须执行 $http.post(...)。

所以我得到的是一个表格，其中包含由 ng-repeat 填充的数据，在其中一个 td 中，我有一个带有 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>

当我单击按钮时，我的控制器中的函数“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 请求。

现在我想将单击按钮的表格移动到另一个表格（id =“tableTwo”），tbody id =“target”。我读过你不应该在你的控制器中使用 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

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);


})
于 2013-10-31T16:23:16.867 回答