CODEWITHSUNDEEP
javascripthtmlangularjs
Miha Šušteršič
Miha Šušteršič

Reputation: 10052

angularJS adding ng-href only if present in javascript object

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>

Upvotes: 3

Views: 1129

Answers (2)

Vipin Jain
Vipin Jain

Reputation: 3756

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
}

Upvotes: 2

Arkantos
Arkantos

Reputation: 6608

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.

Upvotes: 5

Related Questions