ng-输入类型'number‘的模型不工作角度

Question

我已经在angular应用中集成了requirejs。在整合requirejs _s之前，

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

显示输入框中的值。

但是在集成requirejs之后，输入带有type="number“的框并不显示值..Type=为“text”的输入框正常工作。

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

谢谢

Answer 1

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

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

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

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

希望这能有所帮助。

Answer 2

绑定的值是string而不是number。

首先，检查您的服务器是否正在发送number。如果您使用的是PHP，则可能需要使用：

json_encode($array, JSON_NUMERIC_CHECK);

您还可以在客户端使用Javascript将string转换为int或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输入只接受有效的数字(希望如此)。

备注：

我还试图用整数过滤器绑定一个ng-value，但它不起作用。也许是因为当两者都被找到时，ng-model才会被绑定(是的，它们具有相同的优先级)。

Answer 3

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

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响应。

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