CODEWITHSUNDEEP
angularjsionic-framework
Muhammad Ijlal khanzada
Muhammad Ijlal khanzada

Reputation: 193

How to display 4 digits in the TEXT field

I'm using Angular.Js which contains Ionic. I have an input field with the type as TEXT which contains the maxlength of 16 digits.

Now I want to display the last 4 digits of the field values and other digits should be masked.

So can anyone please suggest me any approach on it to achieve.

Upvotes: 2

Views: 1054

Answers (2)

Farzad Yousefzadeh
Farzad Yousefzadeh

Reputation: 2551

Use a custom directive to filter the input on change event.

    .directive("test", function() {
    return {
        require: "?ngModel",
        scope: {
            ngModel: '='
        },
        link: function(scope, elem, attrs, ngModel) {
            elem.bind('change', function() {
                console.log(ngModel);
                ngModel.$setViewValue(scope.ngModel.substring(scope.ngModel.length - 4, scope.ngModel.length));
                ngModel.$render();
            });
        },
        replace: true
    }
});

Using scope is not a good idea. It does not offer re-useable module pattern and also has performance issues.

Upvotes: 0

André Kreienbring
André Kreienbring

Reputation: 2509

To get you started: First bind the value of the Textarea to a scope variable and add a function for ng-change: 

<textarea ng-model="model.myText" ng-change="maskValue()"></textarea>

Then in your controller do something like:

$scope.maskValue = function(){
  $scope.model.myText = "xxxxxxxxxxxxxxxx" + $scope.model.myText.substring(16, 20)
}

maskValue() Will be called every time the content of the Textarea changes. This is surely not working "as is" but it should show the right direction.

Upvotes: 1

Related Questions