Javascript 角度数据绑定-输入类型="；“数字”；

我在使用AngularJS绑定数值时遇到问题

我在JSFIDLE上给出了一个简化的示例：

{{value}}

这应该是三种不同类型的输入字段，如果您更新了一个，那么所有值都应该更新。除了数字输入外，其他都正常工作。e、 g.如果我在第一个数字框中键入20，它将更新值的所有其他实例。但如果我更新文本或范围输入，数字输入将变为空白

---

我想知道问题是否在于如何在字段之间表示/转换数字。e、 g.数字输入是一个浮点数，文本输入是一个字符串？

你说得对，它与字符串与数字类型有关。我使用了

$scope.watch

语句来修复它：

您也可以使用指令来修复它。我创建了一个指令，强制绑定到数字字段的输入为数字

Html:

您可以将其添加到数字字段，如下所示：

<input data-ng-model="stringnumber" numericbinding type="number"/>    

---

完整示例：

我对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/>

角度分析器将在将字符串输入保存到模型中之前将其转换为数值，因此数值输入将自动工作。

此外，如果用户在文本输入中插入字母或任何奇怪的字符，它们将不会保存在模型中，从而防止应用程序的单一真实来源中出现无效值。 只有文本开头的“+”和“-”字符将被正确解析，因此即使是负值也是允许的。

---

我希望这有帮助！：）

为了子孙后代，打字稿版本激发了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;
        }
    }

---

据我所知，这只在链接阶段起作用一次it@rweng有没有机会以$watch的方式更新它？我喜欢指令的概念，所以我想在这里应用它。但我的角度知识还是很差。好吧，我自己算了，看：你能提供一个打字稿版本吗？我有一个$parsers无法识别的问题parsent（value）==值此条件将始终为false，因为值是字符串，而解析的值是数字，您可以将其更改为！=（就像小提琴一样）但是它将是无用的。你是对的，Souhaieb，parseInt（值）==值将始终为false，正确的版本为parseInt（值）=价值此检查并非绝对无用，它阻止字符串以数字开头，例如：var s=“25”；parseInt（值）=值//返回true------var s=“25abc”；parseInt（值）=值//返回FALSE检查可能不是无用的，但确实是

==总是结果为false，因为解析的值是number@ainos984：您的最新评论显示了您的想法，但并不完全正确：您需要说
var s=“25”；parseInt（value）==value
，它将始终为false。
<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/>

     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;
        }
    }