CODEWITHSUNDEEP
angularjsng-showdata-formatters
Duc Nguyen
Duc Nguyen

Reputation: 1

AngularJS - number format directive not working with ng-show

I have used a directive to format number on textbox.

'use strict';
app.directive('numberOnly', function ($filter) {
return {
    require: '?ngModel',
    link: function (scope, elem, attrs, ctrl) {
        if (!ctrl) {
            return;
        }

        ctrl.$formatters.push(function () {
            return $filter('number')(ctrl.$modelValue);
        });

        elem.bind('blur', function (event) {
            var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');
            elem.val($filter('number')(plainNumber));
        });
    }
};
});

And in the html I was use:

<div class="row" ng-show="step === 1">
 <div class="col-lg-6">
     <label for="">Number1</label>
     <div class="form-group">
        <input type="text" class="form-control" number-only ng-model="mynumber1">
     </div>
 </div>
</div>
<div class="row" ng-show="step === 2">
 <div class="col-lg-6">
     <label for="">Number2</label>
     <div class="form-group">
        <input type="text" class="form-control" number-only ng-model="mynumber2">
     </div>
 </div>
</div>

In controller I set step = 1 as default. So when page loaded I see in textbox Number1 the value display as expected: 23,456 But when I change step = 2 to show the Number2 then the value in this textbox is 23456 (it not formatted).

Please let me know why it is and how to resolved it?

Upvotes: 0

Views: 71

Answers (0)

Related Questions