How to use ng-if to test if a variable is defined

All we need is an easy explanation of the problem, so here it is.

Is there a way to use ng-if to test if a variable is defined, not just if it’s truthy?

In the example below (live demo), the HTML displays a shipping cost for the red item only, because item.shipping is both defined and nonzero. I’d like to also display a cost for the blue item (shipping defined but zero), but not for the green item (shipping not defined).

JavaScript:

app.controller('MainCtrl', function($scope) {
  $scope.items = [
      {
        color: 'red',
        shipping: 2,
      },
      {
        color: 'blue',
        shipping: 0,
      },
      {
        color: 'green',
      }
    ];
});

HTML:

<body ng-controller="MainCtrl">
  <ul ng-repeat='item in items'>
    <li ng-if='item.color'>The color is {{item.color}}</li>
    <li ng-if='item.shipping'>The shipping cost is {{item.shipping}}</li>
  </ul>
</body>

I tried doing ng-if='angular.isDefined(item.shipping)', but it didn’t work. Nor did ng-if='typeof(item.shipping) !== undefined'.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Try this:

item.shipping!==undefined

Method 2

I edited your plunker to include ABOS’s solution.

<body ng-controller="MainCtrl">
    <ul ng-repeat='item in items'>
      <li ng-if='item.color'>The color is {{item.color}}</li>
      <li ng-if='item.shipping !== undefined'>The shipping cost is {{item.shipping}}</li>
    </ul>
  </body>

plunkerFork

Method 3

You can still use angular.isDefined()

You just need to set

$rootScope.angular = angular;

in the “run” phase.

See update plunkr: http://plnkr.co/edit/h4ET5dJt3e12MUAXy1mS?p=preview

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply