Javascript 以角度绑定时，输入[number]字段不显示字符串值

我的表单数据是从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]

字段时遇到了问题，因为它们要求数据分别是数字或日期，而不是字符串。布尔值（复选框）等也会出现类似的问题

我想我可以使用

$formatter

绕过它，但传递给格式化程序的值始终为“”。我假定这意味着在Angular已经尝试解析数据模型之后调用了

$formatter

不必首先在控制器中强制转换所有内容，是否有方法通过指令或直接在HTML标记中强制转换数据

例：

---

你能试试这样的东西吗

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

---

你能试试这样的东西吗

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

---

你能试试这样的东西吗

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

---

你能试试这样的东西吗

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

您可以这样做：-

将指令设置为更高优先级，以便指令在

ng model

执行其

viewValue

/

modelValue

评估之前运行，并与

ngModel

执行双向绑定，以获取您设置的实际值（而不是ngModel的viewValue），要支持异步数据分配，请保持临时监视。您不可能使用

格式化程序

执行此操作，因为它们在

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

            }
        };
    });

您可以这样做：-

将指令设置为更高优先级，以便指令在

ng model

执行其

viewValue

/

modelValue

评估之前运行，并与

ngModel

执行双向绑定，以获取您设置的实际值（而不是ngModel的viewValue），要支持异步数据分配，请保持临时监视。您不可能使用

格式化程序

执行此操作，因为它们在

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

            }
        };
    });

您可以这样做：-

将指令设置为更高优先级，以便指令在

ng model

执行其

viewValue

/

modelValue

评估之前运行，并与

ngModel

执行双向绑定，以获取您设置的实际值（而不是ngModel的viewValue），要支持异步数据分配，请保持临时监视。您不可能使用

格式化程序

执行此操作，因为它们在

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

            }
        };
    });

您可以这样做：-

将指令设置为更高优先级，以便指令在

ng model

执行其

viewValue

/

modelValue

评估之前运行，并与

ngModel

执行双向绑定，以获取您设置的实际值（而不是ngModel的viewValue），要支持异步数据分配，请保持临时监视。您不可能使用

格式化程序

执行此操作，因为它们在

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

            }
        };
    });

---

---

---

为什么不从服务器发送一个号码呢？或者在您得到它时对其进行解析，因为模型（输入）不是valid@LoganMurphyAPI就是这样设计的，“值”可以是数字输入，也可以是公式。如果是一个公式，那么它必须是一个字符串。然后它不是一个数字。@Whisher不知道你的意思。模型是有效的；如果我将输入类型切换为文本，我会看到正确填充的值为什么不从服务器发送一个数字？或者在您得到它时对其进行解析，因为模型（输入）不是valid@LoganMurphyAPI就是这样设计的，“值”可以是数字输入，也可以是公式。如果是一个公式，那么它必须是一个字符串。然后它不是一个数字。@Whisher不知道你的意思。模型是有效的；如果我将输入类型切换为文本，我会看到正确填充的值为什么不从服务器发送一个数字？或者在您得到它时对其进行解析，因为模型（输入）不是valid@LoganMurphyAPI就是这样设计的，“值”可以是数字输入，也可以是公式。如果是一个公式，那么它必须是一个字符串。然后它不是一个数字。@Whisher不知道你的意思。模型是有效的；如果我将输入类型切换为文本，我会看到正确填充的值为什么不从服务器发送一个数字？或者在您得到它时对其进行解析，因为模型（输入）不是valid@LoganMurphyAPI就是这样设计的，“值”可以是数字输入，也可以是公式。如果是一个公式，那么它必须是一个字符串。然后它不是一个数字。@Whisher不知道你的意思。模型是有效的；如果我将输入类型切换为文本，我会看到正确填充的值这是我所见过的关于angularjs问题的最好答案之一，我一直在寻找答案。很棒的东西。@PSL谢谢-起初看起来有点复杂，我很惊讶Angular需要这么多的努力才能完成一件相当简单的事情，但我看到Angular有时候就是这样。为什么在watch表达式执行后取消注册它？如果第二次异步更改模型怎么办？你是有意还是无意保护这个案子？@EricB。是的，我是故意这么说的，如果这只是第一次任务。。如果你有一个刷新场景，你可以保留它，否则为什么要保留手表，它可能会被销毁。因此，我不确定我是否理解隔离作用域的全部用途。你能不能直接把手表放在ATTR.ngModel上？隔离作用域有什么帮助？@EricB。是的，您可以这样做，但是在

attrs.ngModel

上直接查看没有意义。您需要在watch evaluation函数上执行

scope.$eval

。提供