AngularJS:绑定到数组元素的数据;不适用于批量更新

AngularJS: Data binding to array elements doesn't work with bulk update

本文关键字：适用于 不适用 更新 数据 绑定 数组元素 AngularJS      更新时间：2023-09-26

所需的行为是，我希望根据后端返回的数据动态生成一些导航条目（一些<a>）。因此，我将每个<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指令问题？

我将您的代码放入位于http://plnkr.co/edit/c5AOjyuLhBGqqugT4VU4?p=preview。

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

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

应该是

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

否则，正如你在Plnkr中看到的，它工作得很好。我猜您的问题是$http调用没有像您期望的那样加载JSON，您的HTML无法访问控制器中的$scope，或者在load函数中设置的$scop与您正在访问的范围不同。

如果你发布一套更完整的代码，我们可以看到它在哪里崩溃。

第一次运行绑定时，它将对象链接绑定到模板。

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

这是正常的预期行为。

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

简单的方法是

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

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

相关文章：