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

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

Try this:

item.shipping!==undefined

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

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

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

Related

Recent Posts