angularjs - ng-repeat 的元素在数组修改时未更新

Question

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

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

selectL2menu() 在 Controller 上定义为:

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

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

<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 错误消息出现 错误:$apply 已在进行中)。

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

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

Answer 1

如果不查看更多 Controller 代码，就很难确定问题所在。这是一个简化的 working fiddle 。我建议您将其与您拥有的进行比较。

请注意，您不需要调用 $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];
    };
}