角度数据绑定 - 输入类型=“数字”
Angular Data Binding - Input type="number"
我在使用 AngularJS 绑定数字值时遇到问题。
我在JSFiddle上放了一个简化的例子:http://jsfiddle.net/treerock/ZvdXp/
<div ng-controller="MyCont" ng-app>
<input type="number" min="0" max="50" value="{{value}}" ng-model="value" />
<input type="text" value="{{value}}" ng-model="value" />
<input type="range" min="0" max="50" value="{{value}}" ng-model="value" />
{{value}}
</div>
这应该是三种不同类型的输入字段,如果更新一个,则所有值都应更新。除了数字输入之外,这是有效的。例如,如果我在第一个数字框中键入 20,它会更新所有其他值实例。但是,如果我更新文本或范围输入,数字输入将变为空白。
我想知道问题是否在于数字在字段之间的表示/转换方式。 例如,数字输入是浮点数,文本输入是字符串?
你是对的,它与字符串与数字类型有关。 我使用了一个$scope.watch
语句来修复它:http://jsfiddle.net/ZvdXp/6/
您也可以使用指令解决此问题。我创建了一个指令来强制绑定到数值字段的输入为数值。
目录:
myApp.directive('numericbinding', function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
model: '=ngModel',
},
link: function (scope, element, attrs, ngModelCtrl) {
if (scope.model && typeof scope.model == 'string') {
scope.model = parseInt(scope.model);
}
}
};
});
您可以像这样将其添加到数值字段中:
<input data-ng-model="stringnumber" numericbinding type="number"/>
完整示例:http://jsfiddle.net/tdjager/cMYQ3/1/
我已经扩展了 Tim 的答案,使其在用户更新控件值后更正数据类型。
myApp.directive('numericbinding', function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
model: '=ngModel',
},
link: function (scope, element, attrs, ngModelCtrl) {
if (scope.model && typeof scope.model == 'string') {
scope.model = parseInt(scope.model);
}
scope.$watch('model', function(val, old) {
if (typeof val == 'string') {
scope.model = parseInt(val);
}
});
}
};
});
如果您希望在模型中保存数值,则可以使用指令,通过角度解析器将文本输入和范围输入生成的字符串转换为数值,如下所示:
myApp.directive('numericsaving', function () {
return {
restrict: 'A',
require: '?ngModel',
scope: {
model: '=ngModel'
},
link: function (scope, element, attrs, ngModelCtrl) {
if (!ngModelCtrl) {
return;
}
ngModelCtrl.$parsers.push(function (value) {
if (!value || value==='' || isNaN(parseInt(value)) || parseInt(value)!==value) {
value=0;
}
return parseInt(value);
});
}
};
});
在 HTML 中,保持数字输入不变,并以这种方式在其他输入中添加指令:
<input type="number" min="0" max="50" value="{{value}}" ng-model="value" />
<input type="range" min="0" max="50" value="{{value}}" ng-model="value" numericsaving/>
<input type="text" value="{{value}}" ng-model="value" numericsaving/>
角度解析器将在将字符串输入转换为数值之前将其转换为数值,因此数字输入将自动工作。这里完整的小提琴。
此外,如果用户在文本输入中插入字母或任何奇怪的字符,它们将不会保存在模型中,从而防止应用程序单一事实来源中的无效值。只有文本开头的"+"和"-"字符将被正确解析,因此甚至允许负值。我希望这有帮助!:)
TypeScript 版本启发了 ainos984,为了后代
export class ngIntegerDirective implements ng.IDirective {
static directiveKey: string = 'ngInteger';
require: string = 'ngModel';
link = (scope, ele, attr, ctrl: ng.INgModelController) => {
ctrl.$parsers.unshift(function (viewValue) {
let result: number = parseInt(viewValue,10);
if (isNaN(result)) {
result = 0;
}
return result;
});
}
public static Factory(): ng.IDirectiveFactory {
const directive = () => new ngIntegerDirective();
directive.$inject = []; //injecter les dépendances ici
return directive;
}
}
- javascript上的数字类型模拟
- 访问数字类型的未定义属性
- 如何获取输入数字类型的值
- 循环遍历具有数字类型的输入
- 应用于数字类型的 ToString
- JavaScript数字类型对货币操作的安全性如何
- html5数字类型只接受正整数
- 隐藏空输入的零值(数字类型)
- 可编辑的数字类型未定义
- clear()函数对数字类型的输入不起作用
- 新的webkit在数字类型输入中将十进制逗号转换为~ dot,反之亦然.该浏览器特性的Javascript名称
- 如何设置数字类型文本框的最大字符数
- 检查字符串/数字类型的字段是否为空
- 这个数字类型是什么?
- 如何将数量类型更改为数字类型以在javascript中执行算术运算
- Javascript字符串到数字类型强制转换
- 防止用户在数字类型的输入元素中输入负数
- Regex从数字类型输入中替换
- 输入数字类型美元符号
- 数字类型错误与猫鼬模型