AngularJS - 使用新数据刷新列表

我有以下部分：AngularJS - 使用新数据刷新列表

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

我successfuly数据加载到我的这个观点。

但我们假设我想为每个项目添加“删除”。删除过程之后 - 如何刷新列表而不刷新页面？

我假设把GET调用放在一个“可重用”函数包含在过程中，对吧？

来源

2016-02-23 user3800799

你的意思是你想从你的对象数组 – oseintow

删除一行或多行我想“重新加载”的网站上我无刷新的视图 – user3800799

这是通过称为双向数据绑定的角度来完成的，只要您删除整个“网站”对象并且网站数据的长度将被更改。如果你改变一个属性，你可能会自己触发一个摘要循环。 – CodeNashor

您需要从阵列，例如删除对象：

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

，而remove植入：

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

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

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

来源

2016-02-23 21:50:43

我认为您可能需要将其从$ scope中删除。 websites.data但这个答案是正确的。数据绑定的神奇意味着当您从数组中移除项目时，视图会自动更新。 – tutley

@tutley谢谢你:)我已经更新了我的回答 –

但是要小心使用'$ index'传递给控制器...'ng-repeat'上的任何过滤器都会改变正确的索引。更安全地索引自己 – charlietfl

AngularJS - 使用新数据刷新列表

回答

相关问题