在 AngularJS 1.6 中，即使 ng-if 正确，如何避免错误 [ngModel:numfmt]？答案

【问题标题】：In AngularJS 1.6, how to avoid a error [ngModel:numfmt] even if ng-if is correct?在 AngularJS 1.6 中，即使 ng-if 正确，如何避免错误 [ngModel:numfmt]？
【发布时间】：2018-02-19 10:15:49
【问题描述】：

我有一个奇怪的错误。我需要根据条件 ng-if 中的值显示 input[type="text"] 或 input[type="number"] ：

 {{ column.item === 'number' }}
 <input ng-model="inserts[pointers.headings.content.tabInserts - 1].dados[0][columnId].value"
        class="form-control"
        placeholder="{{ column.default }}"
        ng-if="column.item === 'text' && !column.extra"/>
  <input
       ng-model="inserts[pointers.headings.content.tabInserts - 1].dados[0][columnId].value"
       class="form-control"
       type="number"
       placeholder="{{ column.default }}" 
       ng-if="column.item === 'number' && !column.extra" />

我有一个奇怪的结果：...当 inserts[pointers.headings.content.tabInserts - 1].dados[0][columnId].value 是前一个字符串之后的字符串一个数字。

即使 {{ column.item === 'number' }} 正确显示“False”并且不会显示第二个输入，AngularJS 仍会继续发送此错误：

错误：[ngModel:numfmt] http://errors.angularjs.org/1.6.4/ngModel/numfmt?p0=John

为什么？它不应该尝试这样做。有人有想法吗？

【问题讨论】：

标签： angularjs types numbers

【解决方案1】：

我认为您从错误中获得了足够的信息：https://docs.angularjs.org/error/ngModel/numfmt?p0=John

预计John 是一个数字

您可以将其复制为：

<tr ng-repeat="x in ['Jhon']">
    <td>
      <input type="number" ng-model="x" /> {{ x }} : {{ typeOf(x) }}
    </td>
  </tr>

VM424 angular.min.js:124 Error: [ngModel:numfmt] http://errors.angularjs.org/1.6.7-build.5459+sha.21a2f4b/ngModel/numfmt?p0=Jhon
    at VM424 angular.min.js:7
    at Array.<anonymous> (VM424 angular.min.js:187)
    at VM424 angular.min.js:192
    at m.$digest (VM424 angular.min.js:147)
    at m.$apply (VM424 angular.min.js:150)
    at VM424 angular.min.js:22

所以请确保inserts[pointers.headings.content.tabInserts - 1].dados[0][columnId].value 是一个数字，而不是Jhon

如果你使用数字作为字符串，你可以使用string-to-number指令：

.directive('stringToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(value) {
        return '' + value;
      });
      ngModel.$formatters.push(function(value) {
        return parseFloat(value);
      });
    }
  };
});

HTML

<table>
  <tr ng-repeat="x in ['Jhon', '2']">
    <td>
      <input type="number" string-to-number ng-model="x" /> {{ x }} : {{ typeOf(x) }}
    </td>
  </tr>
</table>

Demo Plunker

【讨论】：