Angular 在输入中显示 NaN 值

Question

我发现默认情况下 Angular 和 ng-model 指令不会在输入中显示 NaN 值：

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

因此，如果 $parent.mouldTAB.sugNOfCavitiesCost 等于 NaN，则输入为空。

我想展示 NaN 而不是这种行为。

这可能吗？

Answer 1

嗯，因为它是 <input type="number">，所以它不能包含 NaN 作为值。

输入类型数字只能包含numbers、字母"e"或符号(+/-)。

另一方面，你可以使用text type，所以你可以检查控制器中的值是否为空，然后你可以将NaN属性给它，简单如下：

(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>

希望对您有所帮助。

Answer 2

要获得预期结果，请使用以下选项

选项 1：
1，将输入类型更改为文本
2.Check 输入类型，如果字符串将输入的默认值设置为 '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

选项2：

要使用现有代码输入字段作为数字实现预期结果，请再添加一个文本字段以显示 'NaN' 字符串值的情况，并根据值使用 ng-show 和 ng-hide 显示输入字段

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

Angular 在输入中显示 NaN 值

Angular show NaN value into inputs

input

angularjs

angular-ngmodel