AngularJS - 刷新包含新数据的列表

AngularJS - refreshing list with new data

本文关键字：列表 数据 包含新 刷新 AngularJS      更新时间：2023-09-26

>我有以下部分：

<table ng-controller="WebsitesController">
    <tbody>
    <tr ng-repeat="website in websites.data">
        <td>{{website.name}}</td>
        <td>{{website.url}}</td>
    </tr>
    </tbody>
</table>

这是我的控制器：

myApp.controller('WebsitesController', function($scope, $http) {
    $http({
        method: 'GET',
        url: config.serverUrl + '/websites'
    }).then(function successCallback(response) {
        $scope.websites = response.data.message;
    });
});

我用这个成功地将数据加载到我的视图中。

但是假设我想为每个项目添加"删除"。删除过程之后 - 如何在不刷新页面的情况下刷新列表？

我假设将GET调用放在"可重用"函数中包含在过程中，对吗？

您需要从数组中删除对象，例如：

<table ng-controller="WebsitesController">
     <tbody>
        <tr ng-repeat="website in websites.data">
           <td>{{website.name}}</td>
           <td>{{website.url}}</td>
           <td><button ng-click="remove($index)">Remove</button></td>
        </tr>
   </tbody>
</table>

和移除植入：

$scope.remove = function( index ) {
     var removedElement = $scope.websites.data.splice(index, 1);
     console.log( removedElement );
};

基本上，您是通过向其索引（索引由 ngRepeat 循环调用）remove 函数来从数组中删除元素。

编辑：在ngRepeat循环上应用过滤器时，请阅读@charlietfl的评论

相关文章：