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：Navbar下拉列表取决于jQuery。
包含Materialize minified JavaScript
相应地应用类：激活下拉列表的项必须具有dropdown-button类。包含ul子菜单项的dropdown-content必须包含dropdown-button类和唯一ID
data-activates元素的ul属性必须等于包含子菜单项的$(document).ready(function() { $(".dropdown-button").dropdown(); });的ID

最后，包含这段代码以激活下拉列表：

ng-bind-html

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

以下是工作代码段。我没有在示例中使用$sanitize以避免注入var exampleApp = angular.module('app', ['ngSanitize']); exampleApp.controller('Controller', ['$scope', function ($scope){ $scope.menu = [{ "Opcion": "Solicitud", "Nombre": "<a href=\"#/solicitud\">flightSolicitud</a> ", "Descripcion": "Formulario para Solicitud", "Submenu": [] }, { "Opcion": "Consultas", "Nombre": "<a href=\"#/consulta\">searchConsultas</a> ", "Descripcion": "Formulario para Consultas", "Submenu": [] }, { "Opcion": "Transferencia", "Nombre": "<a href=\"#/transferencia\">attach_moneyTransferencia</a> ", "Descripcion": "Transferencia", "Submenu": [] }, { "Opcion": "Administracion", "Nombre": "<a class=\"dropdown-button\" data-activates=\"administracion\">settingsAdministracionarrow_drop_down</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(); });服务（未包含在angular core中）：

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

TextBox myTextBox = new TextBox();
myTextBox.Multiline = true;
myTextBox.WordWrap = true;

使用angularjs从json打印菜单？

2 个答案: