Question

我有这样的自定义指令：

<table  id="usertbl" class="table table-hover table-bordered" style="
 position: relative;
    top: 27px;
">
  <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>gender</th>
        <th>state</th>
        <th>zip</th>
        <th>email</th>
        <th>mobile</th>
         <th>Delete</th>
      </tr>

  <tr ng-repeat="x in users">
    <td>{{ x.fName }}</td>
    <td>{{ x.lName }}</td>
    <td>{{ x.gender }}</td>
    <td>{{ x.state }}</td>
    <td>{{ x.zip }}</td>
    <td>{{ x.email }}</td>
    <td>{{ x.mobile }}</td>
    <td><button class="btn btn-danger" ng-click="clickFunc(x.email)">Delete Customer</button></td>
  </tr>

</table>

</body>


 http.get("getallusers.do",{ params:{pageno:count,pageSize:2}}).then(function(response) {
                    //First function handles success
                    scope.users = response.data;)}

每次点击它都会有一个下一个按钮，它将从数据库中获取10条记录，但每次将10条记录添加到ui表中的现有10条记录中。我只希望在表格中添加新的10条记录。

Answer 1

清除阵列，然后按下面的推送新数据

 scope.users =[];
 scope.users = response.data;

Answer 2

你必须有方法来做到这一点

首先，您可以清除阵列，然后推送新数据

 scope.users = [];
 scope.users = response.data;

其次，您可以拼接并插入新数据

 //This will recreate the array as well
 scope.users.splice(0, scope.users.length, ...response.data);

所以它会像这样

http.get("getallusers.do",{ params:{pageno:count,pageSize:2}}).then(function(response) {
                    //First function handles success
                    scope.users = []
                    scope.users = response.data;
                    //OR
                    scope.users.splice(0, scope.users.length, ...response.data);
             )}

<强> UDPATE

我在您的评论中假设您尝试删除response.data和users中相同的值。

你可以这样做。

scope.users = scope.users.filter(function(obj) { 
               return response.data.indexOf(obj) == -1; });

Answer 3

您需要在$scope.$apply()

之后致电$scope.users = response.data;

  $scope.users = response.data;
  $scope.$apply()

Working demo

如何在使用ng-repeat时删除旧数据并将新数据绑定到表中？

3 个答案: