一起使用ng-init和ng-model

Question

嗨，我有這樣一種情況，我必須使用ng-init格式化某些值，並且必須在輸入字段中使用ng-model進行雙向綁定，因此可以更改和保存值。

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

上面的代碼不起作用。 它不顯示格式化值。 您能否讓我知道如何更改此設置，以便可以使用ng-init顯示格式化的值，還可以保留ng-model以便在提交時綁定已編輯的值。

Answer 1

在這種情況下，您必須使用指令。 想要為任何控件設置一些默認值或初始值時，將使用ng-init。 指令可以將您的顯示值和模型值保持在單獨的格式中。 這是使用逗號格式化整數的指令。

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

同樣，您可以編寫一個日期格式。 您可以使用Date.js進行相同的操作。

用法是：

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

Answer 2

那這個呢：

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