Angular 将 NaN 值显示为输入答案

【问题标题】：Angular show NaN value into inputsAngular 将 NaN 值显示为输入
【发布时间】：2026-01-23 01:55:01
【问题描述】：

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

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

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

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

有可能吗？

【问题讨论】：

因为它是一个<input type="number">，它不能包含NaN作为值（只有数字//字母“e”//符号）。
我也尝试将其设置为“文本”，但它仍然为空

标签： angularjs input angular-ngmodel

【解决方案1】：

为了达到您的预期结果，请使用以下选项

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

【讨论】：

【解决方案2】：

好吧，因为它是 <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>

希望对你有帮助。

【讨论】：