Question

我的表单数据是从REST调用返回的。示例数据是：

{
    id: 4
    version: 3
    code: "ADSFASDF"
    definition: "asdflkj"
    value: "1234"
    active: "false"
    formula: false
    validTo: "2014-12-31T05:00:00"
    validFrom: "2010-12-31T10:00:00"
}

我在使用input[number]和input[date]字段时遇到了麻烦，因为它们要求数据分别是数字或日期而不是字符串。布尔值（复选框）等也会出现类似的问题。

我以为我可以使用$formattter绕过它，但传递给格式化程序的值总是“”。我认为这意味着在Angular已经尝试解析数据模型之后调用$formatter。

无需最初在控制器中投射所有内容，是否有办法通过指令或HTML标签直接投射数据？

例如：

<input type="number" class="form-control" ng-model="charge.value" jk-numeric id="chargeValue"/>

$格式化器：

app.directive( 'jkNumeric',
    function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, element, attrs, ngModelCtrl) {
                var stringToNum = function(text) {
                    if( angular.isNumber(text) )
                        return text;
                    else
                        return parseInt( text, 10);
                }

                // assign the parser and the formatter to the model
                ngModelCtrl.$formatters.unshift(stringToNum);
            }
        };
    });

Answer 1

你可以这样做： -

将指令设置为更高优先级，以便指令在ng-model进行viewValue / modelValue评估之前运行，并执行 2与ngModel 绑定以获取您设置的实际值（而不是ngModel 的 viewValue），并支持异步数据分配保留临时监视。您无法使用formatters执行该操作，因为它们会在ngModel评估该值后运行。

.directive( 'jkNumeric', function() { return { restrict: 'A', require: 'ngModel', priority:999999, //<-- Give a higher priority scope: { model:'=ngModel' //<-- A 2 way binding to read actual bound value not the ngModel view value }, link: function(scope, element, attrs, ngModelCtrl) { //Perform whatever formatting you want to do. function stringToNum(text) { return +text; } var unwatch = scope.$watch('model', function(val){ if(!val) return; ngModelCtrl.$setViewValue(stringToNum(val)); ngModelCtrl.$render(); unwatch(); }); } }; });

<强> Plnkr

另一种观察方式是观察ngModel属性的评估值。

require: 'ngModel', priority:999999, link: function(scope, element, attrs, ngModelCtrl) { function formatToNumber(text) { //do something and return numeric value } scope.$watch(function(){ return scope.$eval(attrs.ngModel); //evaluate the scope value }, function(val){ if(!val) return; ngModelCtrl.$setViewValue(formatToNumber(val)); ngModelCtrl.$render(); });

<强> Plnk2

Answer 2

你可以试试像：

app.directive( 'jkNumeric',
    function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, element, attrs, ngModelCtrl) {
                if (angular.isString(ngModelCtrl.$viewValue) {
                    ngModelCtrl.$setViewValue(parseInt(ngModelCtrl.$viewValue, 10));
                    ngModelCtrl.$render();
                }
            }
        };
    });

输入[数字]字段在以角度绑定时不显示字符串值

2 个答案: