使用angularjs从json打印菜单？

Question

我正在尝试从 JSON 文件打印菜单，但下拉菜单不起作用。

JSON

[{
    "Opcion": "Solicitud",
    "Nombre": "<a href=\"#/solicitud\"><i class=\"material-icons left\">flight</i>Solicitud</a> ",
    "Descripcion": "Formulario para Solicitud",
    "Submenu": []
}, {
    "Opcion": "Consultas",
    "Nombre": "<a href=\"#/consulta\"><i class=\"material-icons left\">search</i>Consultas</a> ",
    "Descripcion": "Formulario para Consultas",
    "Submenu": []
}, {
    "Opcion": "Transferencia",
    "Nombre": "<a href=\"#/transferencia\"><i class=\"material-icons left\">attach_money</i>Transferencia</a> ",
    "Descripcion": "Transferencia",
    "Submenu": []
}, {
    "Opcion": "Administracion",
    "Nombre": "<a class=\"dropdown-button\" data-activates=\"administracion\"><i class=\"material-icons left\">settings</i>Administracion<i class=\"material-icons right\">arrow_drop_down</i></a> ",
    "Descripcion": "Menu de Administracion",
    "Submenu": [{
        "Opcion": "Reservas",
        "Nombre": "#/reservas ",
        "Descripcion": "Reservas",
        "Submenu": null
    }, {
        "Opcion": "Globales",
        "Nombre": "#/globales ",
        "Descripcion": "Globales",
        "Submenu": null
    }, {
        "Opcion": "Convenios",
        "Nombre": "#/convenios ",
        "Descripcion": "Convenios",
        "Submenu": null
    }, {
        "Opcion": "Aplicacion",
        "Nombre": "#/aplicacion ",
        "Descripcion": "Aplicacion",
        "Submenu": null
    }]
}]

HTML：

<li ng-repeat=" item in menu" ng-bind-html="item.Nombre" ng-hide="!authentication.isAuth">
   <!--class="waves-effect waves-light"-->
   <ul ng-if="item.Submenu.length>0" id="administracion" class="dropdown-content">
      <li ng-repeat="items in item.Submenu"><a href="#/reservas">Reservas</a></li>
      <li><a href="#/reservas">Reservas</a></li>
      <li><a href="#/globales">Globales</a></li>
      <li><a href="#/convenios">Convenios</a></li>
      <li><a href="#/aplicacion">Aplicaciones</a></li>
   </ul>
</li>

我正在使用 angularjs 1.3.16 和前端 materializecss

Answer 1

这应该可以完成工作：

<li ng-repeat="item in menu" ng-hide="!authentication.isAuth" class="{{item.Submenu.length ? 'dropdown-button' : ''}}" data-activates="{{item.Submenu.length ? 'administracion' : ''}}">
    <span ng-bind-html="item.Nombre"></span>
    <ul ng-if="item.Submenu.length>0" id="administracion" class="dropdown-content">
      <li ng-repeat="subItem in item.Submenu"><a ng-href="{{subItem.Nombre}}" ng-bind-html="subItem.Descripcion"></a></li>
    </ul>
</li>

由于您使用的是Materialize CSS，请确保您采取以下步骤使子菜单正常工作：

• 包括 jQuery：导航栏下拉菜单依赖于 jQuery。
• 包括 Materialize 缩小的 JavaScript
• 相应地应用类：激活下拉列表的项目必须具有dropdown-button 类。包含子菜单项的 ul 必须具有 dropdown-content 类和唯一 ID
• dropdown-button 元素的data-activates 属性必须等于包含子菜单项的ul 的ID

最后，加入这段代码来激活下拉菜单：

$(document).ready(function() {
  $(".dropdown-button").dropdown();     
});

当您使用 Angular 应用程序时，我建议使用 Angular Material 而不是 Materialize CSS。

下面是工作的sn-p。我在示例中没有使用ng-bind-html，以避免注入$sanitize 服务（不包含在角核心中）：

var exampleApp = angular.module('app', ['ngSanitize']);

  exampleApp.controller('Controller', ['$scope', function ($scope){
    $scope.menu = [{
        "Opcion": "Solicitud",
        "Nombre": "<a href=\"#/solicitud\"><i class=\"material-icons left\">flight</i>Solicitud</a> ",
        "Descripcion": "Formulario para Solicitud",
        "Submenu": []
        }, {
        "Opcion": "Consultas",
        "Nombre": "<a href=\"#/consulta\"><i class=\"material-icons left\">search</i>Consultas</a> ",
        "Descripcion": "Formulario para Consultas",
        "Submenu": []
        }, {
        "Opcion": "Transferencia",
        "Nombre": "<a href=\"#/transferencia\"><i class=\"material-icons left\">attach_money</i>Transferencia</a> ",
        "Descripcion": "Transferencia",
        "Submenu": []
        }, {
        "Opcion": "Administracion",
        "Nombre": "<a class=\"dropdown-button\" data-activates=\"administracion\"><i class=\"material-icons left\">settings</i>Administracion<i class=\"material-icons right\">arrow_drop_down</i></a> ",
        "Descripcion": "Menu de Administracion",
        "Submenu": [{
            "Opcion": "Reservas",
            "Nombre": "#/reservas ",
            "Descripcion": "Reservas",
            "Submenu": null
        }, {
            "Opcion": "Globales",
            "Nombre": "#/globales ",
            "Descripcion": "Globales",
            "Submenu": null
        }, {
            "Opcion": "Convenios",
            "Nombre": "#/convenios ",
            "Descripcion": "Convenios",
            "Submenu": null
        }, {
            "Opcion": "Aplicacion",
            "Nombre": "#/aplicacion ",
            "Descripcion": "Aplicacion",
            "Submenu": null
        }]
        }];
}]);

$(document).ready(function() {
  $(".dropdown-button").dropdown();     
});

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<nav>
<div ng-app="app" ng-controller="Controller" class="nav-wrapper">
  <ul>
    <li ng-repeat="item in menu" class="{{item.Submenu.length ? 'dropdown-button' : ''}}" data-activates="{{item.Submenu.length ? 'administracion' : ''}}">
      <span ng-bind-html="item.Nombre"></span>
      <ul ng-if="item.Submenu.length>0" id="administracion" class="dropdown-content">
        <li ng-repeat="subItem in item.Submenu"><a ng-href="{{subItem.Nombre}}" ng-bind-html="subItem.Descripcion">{{subItem.Descripcion}}</a></li>
      </ul>
    </li>
  </ul>
</div>
</nav>

Answer 2

• 尝试将ng-if="item.Submenu.length>0" 更改为 ng-if="item.Submenu"
• 或向submenu 添加另一个属性，例如show = true，然后使用ng-if="item.submenu.show"。