CODEWITHSUNDEEP
angularjsinputangular-ngmodel
Giovanni Far
Giovanni Far

Reputation: 1653

Angular show NaN value into inputs

I figure out that by default Angular with the ng-model directive doesn't show the NaN value into an input:

<input type="number" class="form-control" id="calcmouldSugNOfCavitiesCost" disabled
     step=0.01
     ng-model="$parent.mouldTAB.sugNOfCavitiesCost">

so if $parent.mouldTAB.sugNOfCavitiesCost is equal to NaN the input is empty.

Instead of this behaviour i would like to show NaN.

it's possible ?

Upvotes: 2

Views: 12972

Answers (2)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve your expected result use below options

Option1 :
1, Change input type to text
2.Check type of input,if string set default value of input to 'NaN'

HTML:

<html>

<body>
<div ng-app="myApp" ng-controller="myCtrl">

<input type="text" id="calcmouldSugNOfCavitiesCost" disabled

     ng-model="sugNOfCavitiesCost">

</div>

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

JS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sugNOfCavitiesCost ='123';
  if(typeof($scope.sugNOfCavitiesCost)=='string'){

    $scope.sugNOfCavitiesCost ='NaN';

  }

});

Codepen- http://codepen.io/nagasai/pen/jAYoxv

Option2:

To achieve expected result with existing code- input field as number, add one more text field to display 'NaN' incase of string values and using ng-show and ng-hide display input fields according to the value

HTML:

  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="number" id="calcmouldSugNOfCavitiesCost" disabled ng-model="sugNOfCavitiesCost" ng-hide="toggle">
    <input type="text" disabled value="NaN" ng-show="toggle">
  </div>

JS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sugNOfCavitiesCost ='123';
  if(typeof($scope.sugNOfCavitiesCost)=='string'){
    console.log($scope);
    $scope.toggle =true;
    }

});

Codepen- http://codepen.io/nagasai/pen/xOpNrw

Upvotes: 2

developer033
developer033

Reputation: 24894

Well, since it's a <input type="number"> it can't contains NaN as value.

Inputs type number can only contains numbers, letter "e" or signs (+ / -).

On other hand, you can use the text type, so you can check if the value is empty in your controller, then you can attribute NaN to it, simple as below:

(function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {
      $scope.test = '';
      
      if (!$scope.test) {
        $scope.test = "NaN";
      }
    });
})();
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <input type="text" class="form-control" id="calcmouldSugNOfCavitiesCost" ng-model="test" disabled>
</body>

</html>

I hope it helps.

Upvotes: 0

Related Questions