如何在Angular中动态生成字段类型编号？

Question

我正在使用一些自定义指令从JSON生成HTML表单。 JSON的一部分包括对字段值的限制。

JSON对字段的限制之一是正十进制类型。我在链接函数中使用的代码来完成此任务：

//...snip
if (<this field should be number>) {
   elem.attr("type", "number");
}

这会成功将字段类型更改为number。但是，有两个问题：

1. 不允许负数
2. 每次输入一个键击（即使是有效数字），它都会抛出一个数字格式异常。例如，如果我输入“123”，我将收到以下3个错误：
   • Error: [ngModel:numfmt] 1 to be a number
   • Error: [ngModel:numfmt] Expected 12 to be a number
   • Error: [ngModel:numfmt] Expected 123 to be a number

我知道该模型已成功更改为数字类型，因为当我使用指令将其打印出来时，它会显示没有引号。

所以我的问题是：

1. 如何允许负数
2. 如何阻止所有例外

Answer 1

How to Dynamically Change the Type of an Input Element

The type of an input element can be changed dynamically simply with AngularJS interpolation.

<input type="{{dynamicType}}" ng-model="inputValue">

Or from a directive

angular.module("myApp").directive("typeVar", function() {
     return {
         link: linkFn
     };
     function linkFn(scope,elem,attrs) {
         //elem.attr("type", "number");  
         attrs.$observe("typeVar", function(value) {
             elem.attr("type", value);
             //attrs.$set("type", value);
         });
     }
});

HTML

<input type-var="{{dynamicType}}" ng-model="inputValue">

The DEMO on JSFiddle

The type property is an intrinsic part of the input element. For more information, see MDN HTML Element Reference -- input.