没有更新的阵列修改NG-repeat的元素 [英] ng-repeat's element not updated on array modification

问题描述

当我尝试更新我的阵列，以更新我的NG-repeat的指令项的 NG-点击

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-重复指令没有更新我的二级菜单（基​​础上更新数组）。 。我试着使用$应用函数（无需） - 相同的结果（虽然使用$适用的错误消息出现的错误：$已经在进行中适用）

那么，为什么我的数组被成功更新点击不NG-重复指令菜单​​元素显露呢？

我看过相关的帖子（<一个href=\"http://stackoverflow.com/questions/16039076/angular-js-view-doesnt-update-when-nested-scope-array-is-updated\">link, 链接，<一个href=\"http://stackoverflow.com/questions/15475601/ng-repeat-list-in-angular-is-not-updated-when-a-model-element-is-spliced-from-th?rq=1\">link)但我以前不找到任何工作的决定。

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

推荐答案

在没有看到更多的控制器code，它是很难确定问题可能是什么。下面是一个简化工作小提琴。我建议你​​把它比作你所拥有的。

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.

请注意，您不需要调用 $范围。$适用（）因为 NG-点击指令将自动为我们的。

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屋！