Question

我试图在side_menu_angular.js中获取数组main的内部数组。数组的第一部分，我能够检测到它，它的工作原理。从第二个病房没有工作。我的HTML结构略有不同，我认为它影响了那些内部数组的调用。我在这里做错了什么或者我错过了什么？以下是我的代码：

HTML

<div ng-app="theme" ng-controller="sideController">
    <div id="mainSlideout"> 
        <div id="mainSlideMenu">
            <ul style="list-style-type: none;">
                <li class="active" ng-repeat="main in menuName">
                    <h3><a class="mainMenuItem" id="photography">{{main.main_menu}}</a></h3>
                </li>
            </ul>
        </div>
    </div>
    <div id="slideout"> 
        <div id="slideMenu" >
            <ul style="list-style-type: none;" >
                <li class="active" ng-repeat-start="sub in menuName" ng-repeat="menus in sub.main_content">
                    <h3><a class="menuItem" id="{{menus.name}}">{{menus.name}}</a></h3>
                </li>
                <li id="{{subMenu.id}}" class="draggable {{menus.name}}" ng-repeat="subMenu in menus.element" ng-repeat-end>
                    <img ng-src="{{subMenu.template}}" id="{{subMenu.id}}" />
                </li>
            </ul>
        </div>
    </div>
</div>

side_menu_angular.js

    angular.module( 'theme' , [
    ] ).controller('sideController' , function($scope){
        $scope.menuName = [ 
        { main_menu:'Photography' , main_content:[
            { name:'Header' , element:[ 
                { id:'template1' , template:'wp-content/themes/dynamictheme/img/template/header/template1.png' }, 
                { id:'template2' , template:'wp-content/themes/dynamictheme/img/template/header/template2.png' }
                ]
            },
            { name:'Content' , element:[ 
                { id:'template3' , template:'wp-content/themes/dynamictheme/img/template/header/template3.png' }
                ]
            },
            { name:'Footer' , element:[ 
                { id:'template4' , template:'wp-content/themes/dynamictheme/img/template/header/template4.png' }
                ]
            }]
        }];
    })
;

Answer 1

问题出在这里。

<li id="{{subMenu.id}}" class="draggable {{menus.name}}" ng-repeat="subMenu in menus.element" ng-repeat-end>
    <img ng-src="{{subMenu.template}}" id="{{subMenu.id}}" />
</li>

您已使用subMenu in menus.element但此{ng}重复无法使用menus。此处只有sub可用，因为它位于ng-repeat-start块中。

Here是一个很好的解决方案，它解释了嵌套ng-repeat-start这似乎是一个很好的解决方案。

AngularJS多维数组调用ng-repeat

1 个答案: