How to add conditional based href to a <a> tag in AngularJs

Question

I have created a menu list, some menus having url and some have not. In case of a menu having url then only the href attribute shown otherwise only tag. I checked like below but it came href="#" in case of menu.Url empty.

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

Can anyone help. Thanks

Numerous ways to do this.... ng-if is one

charlietfl
– charlietfl

2017-08-02 11:24:13 +00:00
Commented Aug 2, 2017 at 11:24 — charlietfl
– charlietfl, Commented Aug 2, 2017 at 11:24

Death-is-the-real-truth · Accepted Answer · 2017-08-02 12:46:45Z

2

Do it with ng-if check:-

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

edited Aug 2, 2017 at 12:46

answered Aug 2, 2017 at 11:24

Death-is-the-real-truth

72.3k10 gold badges58 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

atiq1589 · Accepted Answer · 2017-08-02 12:20:00Z

1

You can use expression here like: 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>

edited Aug 2, 2017 at 12:20

answered Aug 2, 2017 at 11:34

atiq1589

2,3351 gold badge19 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to add conditional based href to a <a> tag in AngularJs

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related