替换服务上的列表，并在视图中查看它的更改

我有一个带控制器的角度应用程序。我也有一个包含数据列表的服务 - 一个包含键值的对象数组。该列表会不时随机更改。该服务将该列表公开给控制器。在我的模板中，我要重复列表。问题是，当我更新服务列表时，我不知道如何更新视图中的列表。列表上的更改仅在数据级别发生，但不在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

替换服务上的列表，并在视图中查看它的更改

回答

相关问题