current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 2 down vote favorite

I have the following javascript object that I'm building my navigation bar from:

$scope.slo = [
    {
      main: "IJS",
      url: "https://www.ijs.si/ijsw"
    },
    {
      main: "ZIC",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "predstavitev",
        two: "osebje"
      }]
    },
    {
      main: "knjižnica",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "tiskane revije",
        two: "elektronske revije",
        three: "baze podatkov",
        four: "katalog(COBISS)"
      }]
    },
    {
      main: "storitve",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "bibliografije",
        two: "medknjižnična izposoja",
        three: "fotokopirnica"
      }]
    }
    ];

    $scope.eng = [{
      main: "IJS"
    },
    {
      main: "ZIC",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "introduction",
        two: "staff"
      }]
    },
    {
      main: "library",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "printed journals",
        two: "electronic journals",
        three: "databases",
        four: "catalogue(COBISS)"
      }]
    },
    {
      main: "services",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "bibliographies",
        two: "interlibrary loan",
        three: "copy room"
      }]
    }];

Now I want to add a ng-href markup to my html, but only if the url property is present. So for instance the first bar would point to an url, but the rest of them would not since they are drop downs.

This is my html markup:

<a ng-href="{{!menu.url}}">{{ menu.main }}<span ng-class="menu.icon"></span></a>

My question is, can I put a condition for ng-href to evaluate whether the url property is present, and then bind the urls property value? And if I can, how do I do it?

With my current markup I only get:

<a href="false" class="ng-binding" ng-href="false">IJS<span ng-class="menu.icon"></span></a>
<a href="true" class="ng-binding" ng-href="true">ZIC<span class="glyphicon glyphicon-triangle-bottom" ng-class="menu.icon"></span></a>
share|improve this question
    
ng-href is the url value, not a boolean option. just remove the ! and it'll be blank if the url doesn't exist, which won't hurt anything. – Jacques 18 hours ago
up vote 2 down vote accepted

You should use ng-attr-* to conditionally add attributes to your markup

<a ng-attr-href="{{menu.url}}">{{ menu.main }}<span ng-class="menu.icon"></span></a>

This will add href attribute to your anchor tag only when there's a valid value for menu.url. If {{menu.url}} resolves to undefined then href attribute will not be added to your element.

share|improve this answer
up vote 1 down vote

You can use ng-if property with function like this

<a ng-href="{{menu.url}}">{{ menu.main }}<span ng-class="menu.icon" ng-if = "isExistUrl(menu.url)"></span></a>

write a function in controller 

$scope.isExistUrl = function(url){
   // Write logic here if exist return true else false
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.