1

<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>
...

上記のコードは、コンソールからの出力なしでサイレントに失敗しました。フィールドごとに fromdateをlink( links.Steps[0].link == data.Steps[0].link) に割り当ててみましたが、うまくいきました。この種の一括更新はサポートされていないのでしょうか。また、この種の ng-directive の問題を今後どのようにトラブルシューティングすればよいのでしょうか?

4

2 に答える 2

0

バインドが初めて実行されたときに、オブジェクトリンクがテンプレートにバインドされました。

したがって、同じオブジェクトに変更を加えると、それが反映されます。ただし、loadLinks関数でリンクを取得すると、新しいオブジェクトが作成されます (同じ名前で)。バインドされた元のオブジェクトは変更されていません。

これは通常の予想される動作です。

私が行う方法の 1 つは、リンク配列を空にして、サーバーからの新しいデータで埋めることです。

それを行う簡単な方法は

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

または、砂糖ライブラリを使用して、元の配列を実際に変更する配列をマージできます

于 2014-10-31T00:23:12.773 に答える