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>

同时使用ng-init和ng-model

2 个答案: