如何在AngularJs中添加基于条件的href到标签

问题描述:

我已经创建了一个菜单列表,一些菜单有url,有些没有。如果菜单有url,那么只显示href属性,否则只显示标签。 我查看了下面的内容,但是在menu.Url为空的情况下它来了href =“#”。如何在AngularJs中添加基于条件的href到<a>标签

<nav class="pushmenu pushmenu-left"> 
    <ul class="main-navigation"> 
     @* Here we will load only top level menu *@ 
     <li class="hidepush" ng-repeat="menu in menus| filter:{ParentID : null} : true"> 
      <a ng-attr-href="{{#{{ menu.URL }} || ''}}"><span class="{{ menu.css }}"></span> {{menu.Name}}</a> 
     </li> 
    </ul> 
</nav> 

任何人都可以帮忙。由于

+0

许多方法可以做到这一点....'NG-if'是一个 – charlietfl

ng-if检查就做: -

<nav class="pushmenu pushmenu-left"> 
    <ul class="main-navigation"> 
     @* Here we will load only top level menu *@ 
     <li class="hidepush" ng-repeat="menu in menus| filter:{ParentID : null} : true"> 
      <a ng-if="!menu.URL"><span class="{{ menu.css }}"></span> {{menu.Name}}</a> 
      <a ng-if="menu.URL" ng-attr-href="{{#{{ menu.URL }} || ''}}"><span class="{{ menu.css }}"></span> {{menu.Name}}</a> 
     </li> 
    </ul> 
</nav> 

你可以在这里使用的表达,如:variable ? true: false

<nav class="pushmenu pushmenu-left"> 
    <ul class="main-navigation"> 
    @* Here we will load only top level menu *@ 
    <li class="hidepush" ng-repeat="menu in menus| filter:{ParentID : null} : true"> 
     <a ng-attr-href="{{ menu.URL ? '#' + menu.URL : ''}}"><span class="{{ menu.css }}"></span> {{menu.Name}}</a> 
    </li> 
    </ul> 
</nav>