一起使用ng-init和ng-model

Question

Hi I have situation where I have to format certain values using ng-init as well as have ng-model for two way binding in input field so value can be changed and saved.

<div ng-repeat="ab in ablist">
    <div class="col-sm-3">
        <input type="text" ng-init="item.ab=fn(item.ab)"  ng-model="item.ab" />
    </div> 
</div>

The above code doesnt work. It does not show the formatted value. Can you let me know how I can change this so I can display the formatted value using ng-init but as well as keep ng-model for binding edited value on submit.

Answer 1

In this case you have to use directive. ng-init is to be used when you want to set some default or initial value to any control. Directive can keep your display value and your model value in separate formats. Here is a directive for formatting integers with commas.

 app.directive('formattednumber', function () {
    return {
        link: function (scope, element, attrs, ctrl) {
            element.bind('blur', function (blurEvent) {
                if (element.data('old-value') !== element.val()) {
                    // console.log('value changed, new value is: ' + element.val());
                    scope.$apply(function () {
                        var v = number_format(element.val(), 0, 0, 99999999999);
                        element.val(v);
                        //scope.myDirective = element.val();
                        //element.data('old-value', element.val());
                    });
                }
            });
            ctrl.$formatters.unshift(function (modelValue) {
                if(!modelValue) modelValue="0";
                if(modelValue.replace &&(isNaN(parseFloat(modelValue)) || !isFinite(modelValue)))
                {
                    modelValue =  parseFloat(modelValue.replace(/,/g, ""));
                }
                var v = number_format(modelValue, 0, 0, 99999999999);
                v = v == undefined? 0 : v;
                element.val(v);
                return v;
            });
            ctrl.$parsers.unshift(function (viewValue) {
                if(!viewValue) viewValue="0";
                viewValue =  parseInt(viewValue.replace(/,/g, ""));
                var v = number_format(viewValue, 0, 0, 99999999999);
                v = v == undefined? 0 : v;
                element.val(v);
                return viewValue;
            });
        },
        restrict: 'A',
        require: 'ngModel'
    }
});

Similarly, you can write one for date formatting. You can use Date.js for the same.

The usage is :

<input type="text" ng-model="item.amount" formattednumber />

Answer 2

What about this:

<div ng-repeat="ab in ablist">
    <div class="col-sm-3">
        <input type="text" ng-init="item=fn(ab)"  ng-model="item" />
    </div> 
</div>