问题在数字字段AngularJS中显示值答案

【问题标题】：Issue displaying value in number field AngularJS问题在数字字段AngularJS中显示值
【发布时间】：2014-09-29 11:43:35
【问题描述】：

我正在尝试绑定来自controller 的string 类型的值，该值来自numeric input 字段，如下所示：

<input type="number" ng-model="detail.Value">

由于detail.Value 的类型为string，因此不会显示I 值（我猜）。

我无法将 Value 属性的类型更改为 int。

如何在视图中显示数字框中的值？

【问题讨论】：

这些数据是来自db吗？
是的，我将它们保存到 $scope 变量中并显示它们@KalhanoToressPamuditha 我将值作为 JSON 对象获取并分配它们.. 准确地说，我正在返回一个对象列表
我也有这个问题。我所做的是将 db 列数据类型更改为整数或双精度或某种数字类型。
@KalhanoToressPamuditha 在我的情况下我做不到那是可悲的部分

标签： angularjs angular-ngmodel ng-bind

【解决方案1】：

用parseFloat包装它：

 detail.Value = parseFloat(detail.Value);

演示Fiddle

【讨论】：

@RandomUser 你的意思是 HTML 吗？
@RandomUser 答案是否定的，您不能将ng-model 与函数一起使用。但我建议你无论如何都要在控制器中制作它。表盘不大。
@mMaximShoustin 在小提琴中我无法在数字框中看到123
嗯，它应该可以在 Chrome、firefox、IE 和 Safari 中运行

【解决方案2】：

$scope.isNumeric = function isNumber(number) {               // function to test the data can be convert to numeric
     return !isNaN(parseFloat(number)) && isFinite(number);
}

...success(data) {      // after getting the data from serverside
    var formData = data.formDataWithNumeric; // get the form data
    for (key in formData) {                  //iterate through the data
        var isNumericData = $scope.isNumeric(formData[key]);  // check data can be convert to a numeric
        if(isNumericData) {
            formData[key] = Number(formData[key]);  // reassign the numeric value instead of string value
        }
    }
}

你可以试试这样的

【讨论】：

【解决方案3】：

您可以将该值传递给将进行解析（并分配给模型）的控制器上的方法，或者如果您真的想在 HTML 中执行此操作，您可以将解析方法分配给控制器中的范围（ $scope.parseFloat = parseFloat;)，然后解析 ng-init。像这样：ng-init="value = parseFloat(detail.Value)"，然后是ng-model="value"。

【讨论】：

【解决方案4】：

这是一个小指令，强制模型值为数字

   function forceNumber ($parse) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
           var getter = $parse(attrs.ngModel);
           var setter = getter.assign;
           var remListner = attrs.$observe('ngModel', function (val) {
              var value = getter(scope);
              if (typeof value !== 'number') {
                 setter(scope,+value);
              }
              // remove listner, no need to keep watching!
              remListner();
           });
        }
    };
   }

您可以在 this small plunker 中看到它的实际效果

希望对你有帮助，问候砂光机

【讨论】：

抱歉，忘记保存 plunk :) 现在完成了，更新了我的答案！