如何使用angularjs对ul和li进行动态导航？

Question

我正在尝试使用ul和li进行动态导航。但是我不能对子菜单导航，我只能显示父菜单。我通过使用字符串和列表作为键值对来使用hashmap。

下面是我实现的代码

在angularjs脚本代码中：

$scope.listMap = [{'key':'Parent Menu', 'values':objectList}];

<div ng-repeat="(key,values) in listMap">
     <ul>
         <li>{{key}}
             <div ng-repeat="value in values">
                 <ul>
                    <li>{{value.object.name}}</li>
                 <ul>
             </div>
         </li>
     </ul>
</div>

它只显示父菜单，但子菜单没有显示，我需要另一个，如果任何没有子菜单的父菜单，我需要检查那个菜单，以避免在主ul中运行ul。

您可以帮助我继续或分享使用angularjs导航的动态菜单的任何示例吗？

Answer 1

请看下面的代码。这是完全有可能做到的。您只需要改进数据的结构。

​

var app = angular.module('app',[]);
app.controller('controller', function($scope) {
  $scope.listMap = [{
    name: 'Home',
    value: [{
      name: 'File'
    }, {
      name: 'Items'
    }]
  }, {
    name: 'Second Menu',
    value: [{
      name: 'Nothings'
    }, {
      name: 'Ooo LA LA'
    }]
  }, ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
  <div ng-repeat="item in listMap">
    <ul>
      <li>{{item.name}}
        <div ng-repeat="value in item.value">
          <ul>
            <li>{{value.name}}</li>
            <ul>
        </div>
      </li>
      </ul>
  </div>
</div>

​