使用Google Chrome中的AngularJS重置包含文本的HTML5“数字”字段

Question

使用案例

我有一个数字字段，专门说＆＃34; 输入数字＆＃34;。最终用户总是会输入一个字符串。当用户点击＆＃34;重置＆＃34;使用谷歌浏览器的按钮，包含文本的数字字段将不会重置。

要求是：

• 无法升级用户以遵循说明。的：d
• 单击重置按钮应将数字默认为 undefined 。
• 理想情况下，我们希望保留type="number"属性，因为它允许在移动设备上弹出小键盘。

代码

可以使用jsFiddle演示。

角度模板

<div ng-app="app" ng-controller="ctrl">
    <p>
        Enter a string into the "number" field. Clicking any of the buttons
        will not clear the field.
    </p>
    <p>
        Enter a number into the "number" field. Clicking any of the buttons
        will clear the field.
    </p>
    <input type="number" ng-model="someValue" placeholder="Enter a number"/>
    <button type="button" ng-click="set('hello, world!')">Set to Hello, World!</button>
    <button type="button" ng-click="set(undefined)">Set to undefined</button>
    <button type="button" ng-click="set('')">Set to empty string</button>
    <button type="button" ng-click="set(0)">Set to zero</button>
</div>

角度应用＆amp;控制器

angular.module('app', [])
.controller('ctrl', function($scope) {
    $scope.someValue = undefined;
    $scope.set = function(val) {
        $scope.someValue = val;
    };
});

问题

• 如何将数字字段重置为在Angular中包含无效值的未定义（或空白）？

Answer 1

您的字段是必填字段，请将其说给Angular！

http://jsfiddle.net/TQ59f/10/

<input type="number" ng-model="someValue" required="true" placeholder="Enter a number"/>

请注意，将undefined设置为数字值不会清除数字输入。但是，将非数字字符串设置为值（如hello world）将清除该字段，因为它不是数字。

编辑：海报mister_rampage找到的指令方式似乎是AngularJS在没有“必需”的情况下解决问题的方法。

Answer 2

解决方案

看来这可以使用指令来解决，但我希望有一个侵入性较小的解决方案，因为这个指令会触发任何输入。但是，它可以满足要求。似乎将字符串输入数字字段会破坏Google Chrome和Angular。

指令

.directive('input', function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (attrs.type.toLowerCase() !== 'number') {
                return;
            } //only augment number input!
            ctrl.$formatters.push(function (value) {
                return value ? parseFloat(value) : null;
            });
        }
    };
});

Answer 3

我在尝试清除这个字段时遇到了这个问题。我能够通过首先将模型值设置为一个数字然后将其显式设置为null包装在$ timeout中来解决这个问题，因此它发生在$ digest之后。

plunker example

您可以使用类似的东西（请确保注入$ timeout！）。

angular.module('app', [$timeout])
.controller('ctrl', function($scope) {
    $scope.someValue = undefined;
    $scope.set = function(val) {
        $scope.someValue = 1;
        $timeout(funciton () {
            $scope.someValue = val
        });
    };
});