替換服務上的列表，並在視圖中查看它的更改

我有一個帶控制器的角度應用程序。我也有一個包含數據列表的服務 - 一個包含鍵值的對象數組。該列表會不時隨機更改。該服務將該列表公開給控制器。在我的模板中，我要重複列表。問題是，當我更新服務列表時，我不知道如何更新視圖中的列表。列表上的更改僅在數據級別發生，但不在UI級別上發生。 當我更新現有列表時，我可以看到UI中的更改，但是當我用另一個列表替換列表時，視圖不會更新。替換服務上的列表，並在視圖中查看它的更改

plunker demonstration

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, getData) { 
    $scope.values = getData.values 
}); 

app.factory('getData', function($timeout){ 
    var values = [{key:"Good", value:"Morning"}]; 
    console.log(values) 

    $timeout(function(){ 
    values.push({key:"Good", value:"Afternoon"}) 
    console.log(values) 
    }, 500) 

    $timeout(function(){ 
    values = [{key:"Good", value:"Night"}] 
    console.log(values) 
    }, 1000) 

    return{ 
    values:values 
    } 
});

來源

2016-12-24 Joe

在第二$timeout你被創建對象的新的基準值分配給變量values。這就是爲什麼新分配的數組不會在視圖中看到的原因。

取而代之，創建一個新的引用，只需清除當前數組，並用新值擴展當前對象。因此，對象的引用將被保留，並且關聯綁定將按原樣運行。

代碼

$timeout(function() { 
    values.length = 0; //clearing array 
    //extending current object with new values 
    angular.extend(values, [{ 
     key: "Good", 
     value: "Night" 
    }]) 
    //instead of doing extend you can just push an objet as well. 
    //values.push({ key: "Good", value: "Night" }]); 
    console.log(values) 
}, 1000);

Demo Plunkr

來源

2016-12-24 11:01:22

假設我通過從控制器到該服務的列表的原始參考和我替換該列表。反過來，「角度」會改變？ – Joe

當你創建一個新的列表，並將其分配到的值。這是造成的。 $scope.values設置爲指向服務的values一次，因此，當您更新同一列表時（與使用push的第一個超時相同），控制器將看到該更改。然而，在第二次超時時，您爲values分配了一個全新的列表，但控制器仍然指向原始列表。

更改所述第二超時以下修正：

$timeout(function(){ 
    values.splice(0, values.length); 
    values.push({key:"Good", value:"Night"}) 
    console.log(values) 
}, 1000);

來源

2016-12-24 11:03:37 MeterLongCat

替換服務上的列表，並在視圖中查看它的更改

回答

相關問題