How to intercept value binding by ng-model directive

Lin Yu Cheng

For example,

If I have a scope value:

$scope.bankInfo = '808,CityBank';

And an input field:

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

I don't know what is the proper way to bind my input field only to digit part (that is 808). Should I use custom directive?

Lin Yu Cheng

I found that custom directive is a good approach to intercept binding. Let declare a directive like this:

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

apply to input and it's done:

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Binding date value to ng-model in angular kendo date picker

pass the ng-model value to angular directive

How to make a directive update ng-model on jquery on event?

how to get ng-class value in directive

Binding value in md-dialog to ng-model in directive

Angular ng-model not binding jQuery date picker value

Cannot set ng-model value to null from directive

How to pass ng-model from directive to template

AngularJS parent ng-model is not binding with custom directive when using ng-if in the template

Directive Two Way Binding with ng-repeat is not binding back to the model

how to get ng-model value in directive

AngularJS : directive binding value to parent scope from template model

Pass ng-model and place-holder value into directive

Passing value from directive back to ng-model

How to modify a model(ng-model value) specified behind a directive in angularjs?

change ng-model value from directive

Angularjs 1.3.15 ng-model in directive not binding on IE but works on Chrome

Binding ng-model directive and value attribute with same property for text box made the chinese character to erase

two way data binding between ng-model and directive

Difference between using ng-model and custom attribute for 2 way binding on custom directive

How to access ng-model value in directive?

How to change ng-model scope value in custom Angular directive?

How to use ng-model with generated tag directive to make binding work?

Angular Directive captures initial null value of ng-model

ng-repeat breaking directive model binding

Binding array to model from directive

AngularJS ng-model in select binding to name instead of value

How to access ng-model from attribute directive?

Passing the value in directive to the ng-model. -angularjs