javascript - AngularJS - 用新数据刷新列表

Question

我有以下部分:

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

这是我的 Controller :

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

我成功地将数据加载到我的 View 中。

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

我假设将 GET 调用放入一个“可重用”函数中，对吧？

Answer 1

需要从数组中移除对象，例子:

<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 的评论