使用 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

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

Answer 2

这应该可以完成工作：

<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。
包括缩小的 Materialise JavaScript
相应地应用 classes：激活下拉菜单的项目必须具有 dropdown-button class。 ul 包含的子菜单项必须具有 dropdown-content class 和唯一 ID
dropdown-button 元素的 data-activates 属性必须等于包含子菜单项 ul 的 ID

最后，包括这段代码来激活下拉菜单：

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

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

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

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>

使用 angularjs 从 json 打印菜单？

Print menu from json with angularjs?

javascript

json

materialize

angularjs