AngularJS：数据绑定到数组元素不适用于批量更新答案

【问题标题】：AngularJS: Data binding to array elements doesn't work with bulk updateAngularJS：数据绑定到数组元素不适用于批量更新
【发布时间】：2014-12-27 05:29:48
【问题描述】：

期望的行为是我想根据从后端返回的数据动态生成一些导航条目（一些 <a>s ）。所以我将每个<a> 的herf 和文本绑定到数组model 的元素的字段。后端调用返回后，我将返回数据 data 分配给 model 以更新 html。 model 和 data 共享相同的结构，但这对我不起作用。

数组看起来像

     $scope.links = {
                    'cancelLink': 'http://cancelLink',
                    'Steps': [{
                      'label': "Step1",
                      'link': "http://1"
                    }, {
                      'label': "Step2",
                      'link': "http://2"
                    }, {
                      'label': "Step3",
                      'link': "http://3",
                      'active': true
                    }, {
                      'label': "Review",
                      'link': "http://review"
                    }]
                  };

更新逻辑

$scope.loadLinks = function () {
                    $http({
                      method: 'GET',
                      url: '/links'
                    }).success(function(data) {
                        $scope.links = data;
                    });
                  };

HTML

<li><a class="text clickable" ng-href={{links.Steps[0].link}}>{{links.Steps[0].label}}</a></li>
<li><a class="text clickable" ng-href={{links.Steps[1].link}}>{{links.Steps[1].label}}</a></li>
...

上面的代码只是默默地失败了，控制台没有任何输出。我尝试将字段从date 分配给link (links.Steps[0].link == data.Steps[0].link) 并且有效。所以我想知道是不支持这种批量更新还是什么？另外我想知道我应该如何解决这种 ng-directive 问题？

【问题讨论】：

标签： javascript arrays angularjs data-binding 2-way-object-databinding

【解决方案1】：

我将您的代码放入 Plnkr，地址为 http://plnkr.co/edit/c5AOjyuLhBGqqugT4VU4?p=preview。

一个小的风格变化（尽管它不会以任何方式破坏），您应该将 ng-href 值用引号括起来：

ng-href={{links.Steps[0].link}}

应该是

ng-href="{{links.Steps[0].link}}"

否则，正如您在 Plnkr 中看到的那样，它可以正常工作。我猜你的问题是 $http 调用没有像你期望的那样加载 JSON，你的控制器中的 $scope 不能被你的 HTML 访问，或者在加载函数中设置的 $scope 不一样您正在访问的范围。

如果您发布更完整的代码集，我们可以看到它的故障所在。

【讨论】：

【解决方案2】：

绑定第一次运行时，它将对象links绑定到您的模板。

因此，如果您对同一个对象进行更改，它会被反映。但是，当您使用 loadLinks 函数获取链接时，您会创建一个新对象（具有相同名称）。未对绑定的原始对象进行任何更改。

这是正常的预期行为。

我做的一种方法是清空链接数组并用来自服务器的新数据填充它。

简单的方法是

links.length = 0 //empties the array
//now append to links the data from server
Array.prototype.push.apply(links,data);

或者您可以使用任何糖库来合并实际修改原始数组的数组

【讨论】：