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

发布时间：2020-12-17 07:07:39 所属栏目：安全来源：网络整理

导读：例如, 如果我有范围值： $scope.bankInfo = '808,CityBank'; 和输入字段： input name="bank_number" ng-model="bankInfo " / 我不知道将输入字段仅绑定到数字部分(即808)的正确方法是什么. 我应该使用自定义指令吗？解决方法我发现自定义指令是拦截绑定的

例如,

如果我有范围值：

$scope.bankInfo = '808,CityBank';

和输入字段：

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

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

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!