AngularJS,在字段中单击而不使用按钮时清除文本

时间:2014-12-18 08:42:02

标签: angularjs

我对AngularJS完全不熟悉,并且想知道从数量字段中清除文本的正确方法是什么?

我在字段中设置了默认值0.00,但我希望用户在字段中点击0.00的功能消失。

理想情况下,我希望此功能仅适用于默认值,但无论如何,如果删除新增值,我都不会感到烦恼。

我尝试过谷歌搜索,我能找到的唯一结果是设置了一个我不想要的字段的清晰按钮。

现在我的HTML是:

<number-only-input input-value="transferitems.cashvalue" input-name="cashvalueinput" />

我的控制器范围是:

$scope.totaltransfervalue = 0.00;

我还需要将此功能应用于页面上的其他4个数量字段。

我对仅数字输入的指令是:

    app.directive('numberOnlyInput', function ($filter) {
    return {
        restrict: 'EA',           
        template: '<input name="{{inputName}}" ng-model="inputValue" ng-blur="oninputblur()" style="width:100% !important" class="form-control" required />',
        scope: {
            inputValue: '=',
            inputName: '='
        },
        link: function (scope, element, attrs, ngModelController) {               
            scope.oninputblur= function() {
                scope.inputValue = $filter('currency')(scope.inputValue, '', 2);                     
            }                
            scope.$watch('inputValue', function (newValue, oldValue) {
                if (newValue == oldValue) { return; }
                if (!newValue) {
                    scope.inputValue = "";
                } else {
                    var arr = String(newValue).split("");
                    if (arr.length === 0) return;
                    if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return;
                    if (arr.length === 2 && newValue === '-.') return;
                    if (isNaN(newValue)) {
                        scope.inputValue = oldValue;
                    }
                }
            });
        }
    };
});

1 个答案:

答案 0 :(得分:1)

<击> 听起来像HTML placeholder属性

的工作
<input placeholder="{{totalTransferValue}}" input-value="transferitems.cashvalue" input-name="cashvalueinput" />

它将范围变量的当前值显示为灰色内容,当用户开始在框中输入时,该内容将消失。这不限于默认值。 不再相关,因为这个问题已经彻底改变了。

你应该能够通过调整指令本身来实现你想要的目标。

首先,您需要将ng-focus添加到模板

template: '<input ng-focus="oninputfocus()" ...

然后实现处理程序

link: function (scope, element, attrs, ngModelController) {               
    scope.oninputfocus = function(){
        // if(scope.inputValue == myDefaultValue) {
        scope.inputValue = '';
        // }
    },
    scope.oninputblur= ...

你应该全力以赴。我包括(作为评论)如何检查只清除字段中的默认值。