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() 在控制器中定义为：

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

那么，为什么我的数组在单击时成功更新，但未反映在ng-repeat指令菜单元素上呢？

我已阅读相关文章 (link, link, link)，但没有找到任何有效的解决方案。

- Mikalaj Murziankou

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

- Mark Rajcok

---

Mark，我在这里找到了你的答案（https://dev59.com/i2Yq5IYBdhLWcg3weQgy）-正是我需要的。问题出在我试图在两个不同的元素上使用相同的控制器（换句话说，我错误地使用了相同名称的ng-controller尝试在两个元素之间共享数据）-这就是为什么更新后的数组在它自己的作用域中的原因。非常感谢您花时间解决我的问题！还要感谢您提供的fiddle！ - Mikalaj Murziankou

Answer 2

你可以尝试在向数组添加项目后执行$scope.$apply()，例如：

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

这对我来说运作良好，可能你有另一个插件功能或类似的东西，阻止了作用域的应用，在我的情况下，我有一个select2，当在字段中选择时，应用未被触发。

- Leonardo Salles

---

如果可以的话，我会给你超过1个赞，因为我在这个问题上卡了很长时间了。谢谢！！ - Maddy

Answer 3

你尝试将selectL2Menu函数更改为以下内容了吗：

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

- Mike Pugh