AngularJs 如何在不重新加载页面的情况下更新数据 table
AngularJs How to update data table without reloading page
我的控制器中有以下从数据库获取对象的数组:
this.objects = [ //data of array goes here ];
然后我有一个 html table:
<tbody ng-repeat="object in object.recipients>
<tr>
<td>{{object.attribute.content}}</td>
</tr>
</tbody>
table 显示正确。我有一个删除按钮,可以从数据库中删除对象。但是为了在我的 table 上看到变化,我需要刷新页面。如何在不刷新的情况下更新我的 table?
在你的删除项函数中,从数组中拼接项后,将数据保存到你的数据库中,然后立即使用ajax将新数据集GET回来。
将数据保存到数据库后,使用:
$http.get(...)
获取新数据并更新 array/table(应有的方式),而无需刷新页面。
- 当您删除数据库中的记录时。您应该从重新加载数据
$http 并为 $scope.objects.
设置数据
或使用删除
$scope.objects = $scope.objects.slice(1); // 1 是
索引对象
然后删除数据库中的记录。
只需使用执行以下操作的控制器功能进行删除:
this.objects.splice(index, 1)
并在 html 中的删除按钮中调用删除函数并传递索引或其他唯一 ID。例如
<button ng-click="deleteThis($index)">Delete</button>
$index指的是ng-repeat中的当前索引
如果您愿意,可以从您的服务器中删除,如果 callback/promise 成功解决,则按照上述说明从视图中删除
我的控制器中有以下从数据库获取对象的数组:
this.objects = [ //data of array goes here ];
然后我有一个 html table:
<tbody ng-repeat="object in object.recipients>
<tr>
<td>{{object.attribute.content}}</td>
</tr>
</tbody>
table 显示正确。我有一个删除按钮,可以从数据库中删除对象。但是为了在我的 table 上看到变化,我需要刷新页面。如何在不刷新的情况下更新我的 table?
在你的删除项函数中,从数组中拼接项后,将数据保存到你的数据库中,然后立即使用ajax将新数据集GET回来。 将数据保存到数据库后,使用:
$http.get(...)
获取新数据并更新 array/table(应有的方式),而无需刷新页面。
- 当您删除数据库中的记录时。您应该从重新加载数据 $http 并为 $scope.objects. 设置数据
或使用删除
$scope.objects = $scope.objects.slice(1); // 1 是 索引对象
然后删除数据库中的记录。
只需使用执行以下操作的控制器功能进行删除:
this.objects.splice(index, 1)
并在 html 中的删除按钮中调用删除函数并传递索引或其他唯一 ID。例如
<button ng-click="deleteThis($index)">Delete</button>
$index指的是ng-repeat中的当前索引
如果您愿意,可以从您的服务器中删除,如果 callback/promise 成功解决,则按照上述说明从视图中删除