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 - 使用新數據刷新列表

回答

相關問題