输入类型'数字'的ng-model不工作angularjs

Question

在intregrating requirejs之前,我已经将angularjs与angular app ..进行了集成,

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

在输入框中显示值.
但是在与requirejs集成之后,输入框的type ="number"没有显示值..输入框的类型="text"正在工作.

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

谢谢

Answer 1

我刚遇到同样的问题并设法解决它.在我的情况下,经由一个RESTful获得的模型$resource和用于量的值被设置为一个字符串字段,这又清除值.为了解决这个问题,我最终在我的控制器中执行了以下操作:

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

在更新视图之前将值转换为float.我遇到的一个问题是,我的第一次尝试是在$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

希望这可以帮助.

Answer 2

您的绑定值string不是a number.

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

json_encode($array, JSON_NUMERIC_CHECK);

您也可以在客户端string转入int或float使用Javascript:

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

必要时限制此指令:)

Answer 4

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