在angular中绑定时，输入[number]字段不显示字符串值

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来绕过它，但是传递给格式化器的值总是"。我认为这意味着$formatter是在Angular已经尝试解析数据模型之后被调用的。

无需在我的控制器中初始转换所有内容，是否有一种方法可以通过指令或直接在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评估之前运行，并与ngModel 进行2方式绑定以获得你设置的实际值(而不是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();
                }
            }
        };
    });