24

ngRepeater を使用して表示される配列がありますが、このディレクティブでは、表示するオブジェクトを返す関数を実行する ngInit ディレクティブを使用しています。すべてが完全に機能しますが、配列に新しい値を追加する「新規」ボタンを追加すると、関数「SetPreview」が一度だけ実行され、配列値の量に応じて関数を実行する必要があると思います。どうやってやるの？

UI:

<body ng-app>

  <ul ng-controller="PhoneListCtrl">
      <button ng-click="add()">Add</button>
    <li ng-repeat="phone in phones" ng-init="displayedQuestion=SetPreview(phone);">
      {{displayedQuestion.name}}
      <p>{{displayedQuestion.snippet}}</p>
    </li>
  </ul>
</body>

コントローラ：

function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];

    $scope.add = function(){
        this.phones.push({name:'1', snippet:'n'});
    };        
    $scope.SetPreview = function(phone)
    {
        //here logic which can take object from diffrent location
        console.log(phone);
        return phone;
    };
}

サンプルはこちら - jsfiddle

編集:これ
はより複雑なサンプルです: -> 電話のコレクションが空になり、[追加] ボタンをクリックすると新しい項目が追加され、編集可能として設定され (テキスト フィールドの値を変更できます)、ngRender が実行されると、SetPreview 関数は編集可能なオブジェクトを返します（プレビューのような作業です）。ここで、[追加] ボタンをもう一度クリックしてみてください。最初の項目の編集可能な値がまだユーザーに表示されていることがわかりますが、ng-repeater 全体を更新したいと考えています。

4

3 に答える 3

17

Angular パフォーマンス機能に遭遇しています。

基本的に、Angular は配列内の要素 (たとえば「A」) が同じオブジェクト参照であることを確認できるため、ng-init を再度呼び出すことはありません。これは効率的です。古いリストを新しいリストに連結したとしても、Angular はそれが同じ参照であると認識します。

代わりに、古いオブジェクトと同じ値で新しいオブジェクトを作成すると、別の参照があり、Angular が再初期化します: 探していることを行う悪い例: http://jsfiddle.net/fqnKt/37/

$scope.add = function(item) {
    var newItems = [];
    angular.forEach($scope.items, function(obj){
        this.push({val:obj.val});
    },newItems)

    newItems.push({val:item})
    $scope.items = newItems;
};

フィドルで採用されたアプローチはお勧めしませんが、コードをトリガーする ng-init とは別の方法を見つける必要があります。

于 2013-03-13T14:27:55.630 に答える
11

非表示ブロックng-initで角度式に置き換えることができることがわかりました：{{}}

<body ng-app>

<ul ng-controller="PhoneListCtrl">
    <button ng-click="add()">Add</button>
    <li ng-repeat="phone in phones">
      <span style="display: none">{{displayedQuestion=SetPreview(phone)}}</span>
      {{displayedQuestion.name}}
      <p>{{displayedQuestion.snippet}}</p>
    </li>
  </ul>
</body>
于 2016-12-26T09:28:08.160 に答える