ng-repeat 的元素未在数组修改时更新 [英] ng-repeat's element not updated on array modification

问题描述

当我尝试在 ng-click 上更新我的数组以更新我的 ng-repeat 指令项时:

When I trying to update my array on ng-click in order to update my ng-repeat's directive items:

<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];
        });
}

在单击一级菜单项后，它应该显示带有相应元素的二级菜单块(通过使用相应值更新数组，见下文).这是我需要在点击时更新的二级菜单块:

Right after click on 1st level menu item it should reveal 2nd level menu block with correspondent elements (by updating the array with correspondent values, see below). Here is 2nd level menu block I need to update on click:

<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 指令没有更新我的二级菜单(基于更新数组).我尝试使用(和不使用)使用 $apply 函数 - 结果相同(尽管使用 $apply 错误消息出现 Error: $apply already in progress).

While click event triggered - my array successfully updated. Nevertheless ng-repeat directive not updated my 2nd level menu (base on updating array). I've tried to with (and without) using $apply function - same result (though using $apply error message appearing Error: $apply already in progress).

那么，为什么在 ng-repeat 指令菜单元素上没有显示在单击时成功更新我的数组?

我已阅读相关帖子(链接、链接、链接)，但没有找到任何可行的决定.

I've read related posts (link, link, link) but did't find any working decision.

推荐答案

如果没有看到更多的控制器代码，就很难确定可能是什么问题.这是一个简化的工作小提琴.我建议你将它与你所拥有的进行比较.

Without seeing more of your controller code, it is difficult to determine what the problem might be. Here is a simplified working fiddle. I suggest you compare it to what you have.

请注意，您不需要调用 $scope.$apply() 因为 ng-click 指令会自动为我们执行此操作.

Note that you don't need to call $scope.$apply() because the ng-click directive will do that for us automatically.

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:

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];
    };
}

这篇关于ng-repeat 的元素未在数组修改时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！