31

我已经将 requirejs 与 angular app 集成在一起。在集成 requirejs 之前，

<input type="number" value="{{cart.quantity}}" ng-model="cart.quantity" />

正在显示输入框中的值。
但是在与 requirejs 集成后，type="number" 的输入框没有向我显示值.. type="text" 的输​​入框正在工作。

如何使用 type="number" 显示价值？

谢谢

4

12 回答 12

29

我刚刚遇到了同样的问题并设法解决了它。在我的例子中，模型是通过 RESTful 获得的$resource，并且金额的值作为字符串提供给字段，这反过来会消除该值。为了解决这个问题，我最终在我的控制器中执行了以下操作：

$scope.cart = Cart.get(id: $routeParams.id, function(cart){
    cart.quantity = parseFloat(cart.quantity, 10);
});

在更新视图之前将值转换为浮点数。我遇到的一个问题是我的第一次尝试是$scope.cart.quantity = parseFloat($scope.cart.quantity, 10)在get. 这不起作用，因为在异步调用get完成时该值被覆盖。

$scope.cart = Cart.get(id: $routeParams.id);
$scope.cart.quantity = parseFloat($scope.cart.quantity, 10); // This won't work

希望这可以帮助。

于 2013-07-03T02:49:22.237 回答
9

您的绑定值string不是 a number。

首先，检查您的服务器是否正在发送number. 如果您使用的是 PHP，您可能希望使用：

json_encode($array, JSON_NUMERIC_CHECK);

您也可以在客户端将您的string变成int或使用 Javascript：float

var data = ['1.9', '3']; //these won't be binded to the numbers-only input
data[0] = parseFloat(data[0]); //this will
data[1] = parseInt(data[1]);

这不是一个错误，因为numbers输入只接受有效数字（希望如此）。

笔记：

我还尝试将 anng-value与整数过滤器绑定，但它不起作用。也许是因为ng-model当两者都被找到时绑定的是（是的，它们具有相同的优先级）。

于 2014-08-05T16:12:24.317 回答
6

我使用自定义指令解决了这个问题：

angular.module('directives').directive('input', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
      if ($el.get(0).type === 'number') {
        ngModel.$parsers.push(function(value) {
          return value.toString();
        });

        ngModel.$formatters.push(function(value) {
          return parseFloat(value, 10);
        });
      }
    }
  }
})

这样，当通过 restfull 资源获取数据时，您不需要更改任何 HTTP 响应。

如有必要，限制此指令:)

于 2015-08-30T22:24:35.293 回答
5

值被 ng-model 覆盖。删除您的 value 属性，您的 ng-model 将使用购物车数量填充输入。

于 2013-05-30T08:48:19.323 回答
2

我遇到了同样的问题（实际上是输入 type="range"），这是我的解决方案，使用自定义指令：

app.directive('ngFloat', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
        ngModel.$parsers.push(function(value) {
            return parseFloat(value, 10);
        });

        ngModel.$formatters.push(function(value) {
            return value.toString();
        });
    }
  };
});

由于我将指令限制为“ngFloat”属性，因此需要像这样标记输入：

<input ng-float type=.........

我希望这可以帮助未来的游客。

于 2015-11-03T20:55:04.890 回答
1

我在输入中添加了一个名称属性，它开始工作

于 2013-09-15T23:36:04.063 回答
1

如果cart.quantity数据类型不是Number，它将不起作用。

您需要

$scope.cart.quantity = parseFloat($scope.cart.quantity);
于 2018-06-12T03:08:13.090 回答
0

在这种情况下，您的 ng-model cart.quantity 必须是数字而不是字符串。

于 2014-04-29T11:09:15.383 回答
0

我也遇到了同样的问题，并试图找到一个对新手来说很复杂的解决方案，然后我在 https://docs.angularjs.org/api/ng/input/input遇到了旧版本 angular 的解决方案%5B数字%5D

根据哪个 ng-model 接受一个字符串，解决方法是我们定义一个

分钟

和

最大限度

使用输入类型=“数字”时的值

它对我有用，我希望它也适用于其他人

于 2017-06-13T10:55:31.843 回答
0

我找到了这个链接，这对我有帮助。它创建了一个字符串到数字的指令，您可以以类似的方式将其附加到数字输入，Ruy Diaz 展示了：https ://docs.angularjs.org/error/ngModel/numfmt

于 2015-08-15T16:16:20.383 回答
0 
angular
  .module('xxx')
  .directive('ngFloat', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, $el, attrs, ngModel) {
        ngModel.$formatters.push(function (value) {
          return +value
        });
      }
    };
  });
于 2018-12-11T02:36:32.950 回答
0

奇怪的是，在我的情况下，从为我工作的文件中删除min和max属性。input type="number"我的意思是ng-model工作！

似乎与上面发布的 arpit kumar 完全相反。

AngularJS 版本：1.6.1

于 2017-07-05T06:18:58.467 回答