具有实体化功能的动态菜单

Dynamic menu with materializecss

本文关键字：动态 菜单 功能 实体化      更新时间：2023-09-26

我有一个关于菜单和子菜单的问题，我想使其动态。我有以下html

<li ng-repeat="item in menus" 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" ng-init="$last && rebindDropDowns()">
        <a ng-href="{{subItem.Nombre}}" ng-bind-html="subItem.Opcion">{{subItem.Opcion}}</a>
      </li>
    </ul>
    <ul ng-if="item.Submenu.length>0" id="Solicitud" class="dropdown-content">
      <li ng-repeat="subItem in item.Submenu" ng-init="$last && rebindDropDowns()">
        <a ng-href="{{subItem.Nombre}}" ng-bind-html="subItem.Opcion">{{subItem.Opcion}}</a>
      </li>
    </ul>
</li>

我有两个子菜单（"Administracion"、"Solicides"），但只能显示给"Administrarion"，在"Solicites"中，它显示的是"administration"的同一个子菜单。

那是因为我有这条线

data-activates="{{item.Submenu.length ? 'Administracion' : ''}}"

但如果我这样做，它会给我错误

data-activates="{{item.Submenu.length ? {{item.Opcion}} : ''}}"

选项可以是"管理"或"征求意见"

你知道怎么解决这个问题吗？

显然我工作了，我现在这样做没有"｛｛｝｝"并且运行正常。

<li ng-repeat="item in menus" class="{{item.Submenu.length ? 'dropdown-button' : ''}}"
          data-activates="{{item.Submenu.length ? item.Opcion : ''}}">
        <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" ng-init="$last && rebindDropDowns()"><a ng-href="{{subItem.Nombre}}" ng-bind-html="subItem.Opcion">{{subItem.Opcion}}</a></li>
        </ul>
        <ul ng-if="item.Submenu.length>0" id="Solicitud" class="dropdown-content">
          <li ng-repeat="subItem in item.Submenu" ng-init="$last && rebindDropDowns()"><a ng-href="{{subItem.Nombre}}" ng-bind-html="subItem.Opcion">{{subItem.Opcion}}</a></li>
        </ul>
      </li>

如果它能帮助别人，我就离开。我希望如此。

相关文章：