javascript - 以 Angular 绑定(bind)时，输入[数字]字段不显示字符串值

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] 字段时遇到了麻烦，因为它们要求数据分别是数字或日期，而不是字符串。 bool 值(复选框)等也会出现类似的问题

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

无需首先在 Controller 中转换所有内容，有没有办法通过指令或直接在 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 路绑定(bind) 获取您设置的实际值(而不是 ngModel 的 viewValue )，并支持异步数据分配保持临时监视。你不可能用 formatters 来做到这一点因为他们追随ngModel已评估值(value)。

.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