Question

我发现自己正在与指针战斗＆＃39;在javascript中。它就像我再次使用C ++一样。我想知道你对以下问题的态度。

我的情况：我的 ng-repeat 超过了 collection 。当 点击一个 的集合元素时， 我会复制该元素 ， 对其进行更改 和POST / PUT数据到服务器 。

如果 服务器回复200 ，我将 将这些更改应用于集合 。该集合包含对象，因此这意味着我使用引用NOT值。

带有服务的模块定义：

angular.module('dataModule', [])

    .service('DataService', function () {
        this.collection = [{id:0, who: 'I'},
                           {id:1, who: 'YOU'}, 
                           {id:2, who: 'HE'},
                           {id:3, who: 'SHE'},
                           {id:4, who: 'IT'}];
})

这里是控制器：

.controller('listCtrl', function ($scope, $timeout, DataService) {
    // Data used in view
    $scope.collection = DataService.collection;

    // Action trigger from the view
    $scope.change = function(data, index){
        // Get a copy 
        var copy = angular.copy(data);

        // Apply changes over the copy
        copy.id = data.id*100*index;

        // Simulate POSTing/Updating data to server
        console.log('Sending data to server...');
        $timeout(function(){
            // Response is 200
            var response = 200;

            // Assigning copy -> data
            data = copy;

            // The prev. assignment is not updating the collection
            // Of course I could do $scope.collection[index] = copy; 
            //  because this case is simple enough.
            // Im finding myself having the service with methods find, edit, ...
            // What's a better approach?

        }, 2000)
    }
});

正如我在评论中所说，我发现自己正在实现查找，编辑或获取服务等功能。这是方法吗？

以下是jsfiddle http://jsfiddle.net/kitimenpolku/M66LV/5/，以防我无法正确解释。

Answer 1

data是对原始项目的引用，但使用data = copy只会使数据无效，因此原始内容永远不会更新。

所以要更新你需要执行的原始项目。

 data.id = copy.id;
 data.who = copy.who;

或

$scopy.collection[index] = copy

摆弄更新的代码

http://jsfiddle.net/M66LV/7/

Answer 2

从我的角度来看，在写入服务器后，有两种方法可以更新视图：

您再次向服务器询问整个集合，然后进行设置本地。这需要使用承诺并替换当前收集一个新的。这个替换会自动触发ng-repeat指令中的更新在模板中使用。
您在本地执行相同的转换，就像您自己提到的那样。这需要找到正确的数组索引并交换旧编辑的索引。这就是我喜欢设置我自己的应用程序的方式，这真的不是那么难。方法如下：

我可以看到你真的在想这个javascript替换，好像它是在c ++中。在这里，你是正确的，因为服务器回调中的data = copy;只是更新引用，而不是任何数据本身。

相反，您可以直接更改集合本身：$scope.collection[index] = copy

这是一个工作小提琴：http://jsfiddle.net/wilsonjonash/GZ2eR/

AngularJS - 使用服务和ng-repeat时引用的问题

2 个答案: