我对angular非常陌生,无法在我的angular应用中找到访问子菜单项的解决方案。我可以访问顶级菜单项,但对于如何获取第二级菜单项却一无所知

下面是我到目前为止的代码

html

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="list">
  <div ng-controller="ListCtrl">
    <ul>
        <li ng-repeat="menu in menus" id="{{artist.id}}">
            <a ng-href="{{menu.content}}">{{menu.description}}</a>
            <ul>
                <li ng-href="{{menu.content}}">{{menu.menu}}</li>
            </ul>
        </li>
    </ul>
  </div>
</html>

javascript
// Code goes here
angular.module('list', []);

function ListCtrl($scope, $http) {
  $http({
    method: 'GET',
    url: 'menu.json'
  }).success(function(data) {
    $scope.menus = data.menus; // response data
    angular.forEach(data.menus, function(menu, index) {

    });
  });
}

json
{
   "menus":[
      {
         "id":"contact",
         "leaf":true,
         "description":"Contact Us",
         "link":"",
         "content":"contactUs.html",
         "cssClass":"static-content",
         "menu":null
      },
      {
         "id":"rules",
         "leaf":false,
         "description":"Sports Betting Rules",
         "link":"",
         "content":"",
         "cssClass":"",
         "menu":[
            {
               "id":"types",
               "leaf":true,
               "description":"Wager Types",
               "link":"",
               "content":"wagerTypes.html",
               "cssClass":"static-content wager-types",
               "menu":null
            },
            {
               "id":"odds",
               "leaf":true,
               "description":"Odds & Lines",
               "link":"",
               "content":"oddsAndLines.html",
               "cssClass":"static-content",
               "menu":null
            },
            {
               "id":"policies",
               "leaf":true,
               "description":"Rules & Policies",
               "link":"",
               "content":"rulesAndPolicies.html",
               "cssClass":"static-content rules-policies",
               "menu":null
            },
            {
               "id":"bonuses",
               "leaf":true,
               "description":"Sports Bonuses",
               "link":"",
               "content":"sportsBonuses.html",
               "cssClass":"static-content",
               "menu":null
            }
         ]
      },
      {
         "id":"conditions",
         "leaf":false,
         "description":"Terms & Conditions",
         "link":"",
         "content":"",
         "cssClass":"",
         "menu":[
            {
               "id":"termsOfService",
               "leaf":true,
               "description":"Terms of Service",
               "link":"",
               "content":"termsOfService.html",
               "cssClass":"static-content",
               "menu":null
            },
            {
               "id":"privacy",
               "leaf":true,
               "description":"Privacy Policy",
               "link":"",
               "content":"privacy.html",
               "cssClass":"static-content",
               "menu":null
            }
         ]
      },
      {
         "id":"view",
         "leaf":true,
         "description":"View in: Mobile | Full Site",
         "link":"",
         "content":"view.html",
         "cssClass":"static-content",
         "menu":null
      }
   ]
}

最佳答案

添加另一个ng-repeat

 <!DOCTYPE html>
    <html>
    <head>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
      <script src="app.js"></script>
    </head>
    <body ng-app="list">
      <div ng-controller="ListCtrl">
        <ul>
            <li ng-repeat="menu in menus" id="{{artist.id}}">
                <a ng-href="{{menu.content}}">{{menu.description}}</a>
                <ul>
                    <li ng-href="{{submenu.content}}" ng-repeat="submenu in menu.menu">{{submenu.id}}</li>
                </ul>
            </li>
        </ul>
      </div>
    </html>

关于javascript - 使用json和angularJs访问范围中的嵌套菜单项,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41423685/

10-12 03:06