Ng-модель для ввода типа 'number' не работает angularjs

Ответ 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

Надеюсь, что это поможет.

Ответ 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 - это тот, который привязан, когда оба найдены (yup, они имеют одинаковый уровень приоритета).

Ответ 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);
        });
      }
    }
  }
})

Таким образом, вам не нужно изменять какой-либо ответ HTTP, когда данные получаются с помощью ресурса restfull.

При необходимости ограничьте эту директиву:)

Ответ 4

переопределяется ng-model. Удалите свойство value, и ваша ng-модель заполнит ввод количеством корзины.

Ответ 5

Я добавил атрибут имени на вход и начал работать

Ответ 6

У меня была та же проблема (с фактическим типом ввода = "диапазон" ), и вот мое решение, используя настраиваемую директиву:

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=.........

Надеюсь, это поможет будущим посетителям.

Ответ 7

Если тип данных cart.quantity не Number, он не будет работать.

Вам нужно

$scope.cart.quantity = parseFloat($scope.cart.quantity);

Ответ 8

Ваша ng-модель в этом случае cart.quantity должна быть числом, а не строкой.

Ответ 9

Я нашел эту ссылку, которая мне помогла. Он создает директиву "строка-к-номер", которую вы можете присоединить к вводам числа аналогичным образом, что Руй Диаз показал: https://docs.angularjs.org/error/ngModel/numfmt

Ответ 10

Я тоже столкнулся с той же проблемой и попытался найти решение, все было сложным для новичков то я наткнулся на решение в старая версия angular в https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

согласно которому ng-модель принимает строку обходным путем является то, что мы определяем a

мин

и

макс

при использовании типа ввода = "число"

Это сработало для меня, и я надеюсь, что это сработает и для других.

Ответ 11

Странно, в моем случае для меня работали удаление атрибутов min и max из input type="number". Я имею в виду, что ng-model работает!!

Кажется совершенно противоположным тому, что было написано выше.

Версия AngularJS: 1.6.1

Ответ 12

angular
  .module('xxx')
  .directive('ngFloat', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, $el, attrs, ngModel) {
        ngModel.$formatters.push(function (value) {
          return +value
        });
      }
    };
  });