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

一尘不染

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

angularjs

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

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

单击一级菜单项后，它应立即显示带有相应元素的二级菜单块（通过使用相应值更新数组，请参见下文）。这是我需要在单击时更新的第二级菜单块：

<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已经在进行中 ）。

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

我已经阅读了相关的文章（link，link，link），但是没有找到任何可行的决定。

阅读 266

2020-07-04

共1个答案

一尘不染

没有看到更多的控制器代码，很难确定问题可能出在哪里。这是一个简化的工作提琴。我建议您将其与现有产品进行比较。

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

2020-07-04