如何通过ng-model指令拦截值绑定

时间:2013-11-14 04:47:19

标签: angularjs

例如,

如果我有范围值:

$scope.bankInfo = '808,CityBank';

输入字段:

<input name="bank_number" ng-model="bankInfo " />

我不知道将输入字段仅绑定到数字部分(即808)的正确方法是什么。 我应该使用自定义指令吗?

1 个答案:

答案 0 :(得分:7)

我发现自定义指令是拦截绑定的好方法。 让我们声明一个这样的指令:

module.directive('banknumber', function () {
        return {
            require: 'ngModel',
            link: function ($scope, $element, $attrs, modelCtrl) {
                modelCtrl.$formatters.push(function (inputValue) {
                    var modelValue = modelCtrl.$modelValue;
                    var bkno = (modelValue == null) ? '' : modelValue.split(',')[0];

                    return bkno;
                });

                modelCtrl.$parsers.push(function (inputValue) {
                    var modelValue = modelCtrl.$modelValue;
                    var bankName = (modelValue == null) ? '' : modelValue.split(',')[1];

                    return modelCtrl.$viewValue + ',' + bankName;
                });
            }
        };
    });

申请输入并完成:

<input name="bank_number" ng-model="bankInfo" banknumber/>