AngularJS：數據綁定到數組元素不適用於批量更新

Question

理想的行為是我想根據從后端返回的數據動態生成一些導航條目（一些<a> s）。 所以我將herf和每個<a>的文本綁定到數組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 ）進行現場分配，並且links.Steps[0].link == data.Steps[0].link 。 所以我想知道是否不支持這種批量更新？ 我也不知道該如何解決此類ng指令問題？

Answer 1

我將您的代碼放入http://plnkr.co/edit/c5AOjyuLhBGqqugT4VU4?p=preview的Plnkr中。

一個小的樣式更改（盡管它不會以任何方式中斷），您應該將ng-href值括在引號中：

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

應該

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

否則，正如您在Plnkr中看到的那樣，它可以正常工作。 我猜你的問題是$ http調用未按預期加載JSON，HTML中無法訪問控制器中的$ scope，或者在load函數中設置的$ scope不相同您正在訪問的范圍。

如果您發布了更完整的代碼集，我們可以看到它的出處。

Answer 2

綁定第一次運行時，它將對象鏈接綁定到您的模板 。

因此，如果對同一對象進行更改，則會反映出來。 但是，當您使用loadLinks函數獲取鏈接時，會創建一個新對象（具有相同的名稱）。 沒有對綁定的原始對象進行任何更改。

這是正常的預期行為。

我做的方法之一是清空links數組，並用服務器中的新數據填充它。

簡單的方法是

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

或者，您可以使用任何糖庫來合並實際修改原始數組的數組