Using NaN with condition

Question

I have one division in my modal ,I only required to show the div when the value of a variable $scope.ornamentweightinbank is not equal to NaN.

<div class="rows container-fluid" ng-if="ornamentweightinbank!==NaN">

Is this the conventional way to deal with NaN

are you checking `ornamentweightinbank` in not a number validation or just string `NaN` — Sachila Ranawaka, Mar 25 '17 at 15:03
@AjithVManali Yup. Because I don't think Angular know that you're comparing it to JS's NaN, but to an undefined property in the scope — Alon Eitan, Mar 25 '17 at 15:05

score 2 · Answer 1 · edited May 23 '17 at 10:30

You can access JavaScript's native isNaN function by creating a similar function on this within your controller, you can then access it in your ngIf directive like so:

(function() {

  'use strict';

  angular.module('app', []);

})();

(function() {

  'use strict';

  angular.module('app').controller('MainController', MainController);

  MainController.$inject = ['$scope', '$timeout'];

  function MainController($scope, $timeout) {

    // make isNaN available in your view via controller as syntax
    this.isNaN = function(value) {

      return isNaN(value);

    }

    // set ornamentweightinbank to a number
    $scope.ornamentweightinbank = 10;

    // for demonstrative purposes set ornamentweightinbank to NaN after 5 seconds
    $timeout(function() {

      $scope.ornamentweightinbank = 10 * "test";

    }, 5000);

  }

})()

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as MainCtrl">

  <div class="rows container-fluid" ng-if="!MainCtrl.isNaN(ornamentweightinbank)">
    This will show if ornamentweightinbank is not equal to NaN
  </div>

  <div class="rows container-fluid" ng-if="MainCtrl.isNaN(ornamentweightinbank)">
    This will show if ornamentweightinbank is equal to NaN
  </div>

</div>

Please see this stackoverflow answer why you cannot directly use isNaN in your expression.

score 0 · Answer 2 · answered Aug 28 '17 at 11:01

There is one way where in you can make the isNaN function available in html i.e. by assigning it in scope/this of the current controller.

this.isNaN = function(value){ //or $scope.isNaN = function(value){
return isNaN(value);
}

which when used in HTML,

<span ng-class="{'color-red':!isNaN(value)}" ng-bind="value"></span>

I suppose for any kind of Javascript Native functions which I might require inside HTML, I prefer making a copy of windows object in rootScope.

$rootScope.windowInstance = window;

this will allow us to use any kind of window functions in html,

<span 
ng-class="{'color-red' : !windowInstance['isNaN'](value) && windowInstance['parseFloat'](value) < 0}" 
ng-bind="value">
</span>
<!-- Will color the value red when the value is Number and negative -->

Using NaN with condition

2 Answers2