web-dev-qa-db-ja.com

配列の変更時にng-repeat要素が更新されない

Ng-repeatのディレクティブ項目を更新するためにng-clickで配列を更新しようとすると、次のようになります。

<li ng-repeat="itemL1 in mainMenuL1Arr"
    ng-click="selectL2menu(itemL1.name)">
  <i ng-class="getClass(itemL1.icon)"></i>
</li>

selectL2menu（）コントローラーで次のように定義されています：

$scope.selectL2menu = function selectL2menu(itemL1name){
        $scope.$apply(function () {
            $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name];
        });
}

第1レベルのメニュー項目をクリックした直後に、対応する要素を含む第2レベルのメニューブロックが表示されます（対応する値で配列を更新することにより、以下を参照）。クリック時に更新する必要がある第2レベルのメニューブロックは次のとおりです。

<li ng-repeat="itemL2 in mainMenuL2CurArr"
    class="subMenuElemBlock"
    ng-class="{active: itemL2.selected}">
        <a href="#">
             <i ng-class="getClass(itemL2.icon)"></i>
             <span>{{itemL2.name}}</span>
        </a>
</li>

クリックイベントがトリガーされている間、配列は正常に更新されました。それにもかかわらず、ng-repeatディレクティブは私の第2レベルのメニューを更新しませんでした（配列の更新に基づいています）。 $ apply関数を使用して（および使用せずに）試しました-同じ結果です（ただし、$ applyエラーメッセージが表示されますエラー：$ applyはすでに進行中です ）。

では、クリック時に配列が正常に更新され、ng-repeatディレクティブメニュー要素に表示されないのはなぜですか？

関連する投稿（ link 、 link 、 link ）を読みましたが、実用的な決定は見つかりませんでした。

angularjsangularjs-ng-repeat
9
Mikalaj Murziankou

コントローラコードをもっと見ることなく、問題が何であるかを判断することは困難です。これが簡略化された 作業フィドル です。私はあなたがそれをあなたが持っているものと比較することを提案します。

$scope.$apply()を呼び出す必要はないことに注意してください。これは、ng-clickディレクティブはそれを自動的に行います。

HTML：

<ul>
    <li ng-repeat="itemL1 in mainMenuL1Arr" ng-click="selectL2menu(itemL1.name)">
      {{itemL1.name}}</li>
</ul>
<ul style="margin-left: 20px">
    <li ng-repeat="itemL2 in mainMenuL2CurArr"><a href="#">
         <span>{{itemL2.name}}</span>
    </a>
    </li>
</ul>

JavaScript：

function MyCtrl($scope) {
    $scope.mainMenuL1Arr = [ {name: 'one'}, {name: 'two'} ];
    $scope.mainMenuL2Obj = { 
        one: [ {name: '1.1'}, {name: '1.2'} ],
        two: [ {name: '2.1'}, {name: '2.2'} ] };
    $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj['one'];
    $scope.selectL2menu = function (itemL1name) {
        console.log(itemL1name);
        $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name];
    };
}
5
Mark Rajcok

次のような配列にアイテムを追加した後、$ scope。$ apply（）を作成してみてください。

$scope.array.Push({id: 1, name: 'test'});
$scope.$apply();

私にとっては問題なく動作します。おそらくプラグインなどの別の機能があり、スコープのブロックが適用されます。私の場合はselect2があり、フィールドで選択しても適用は実行されません。

3
Leonardo Salles

SelectL2Menu関数を次のように変更してみましたか？

$scope.selectL2menu = function (itemL1name){
    $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name];
}
0
Mike Pugh