НГ-мадэль для ўводу тыпу "нумар" не працуе angularjs

Я інтэграваў requirejs з кутнім дадаткам .. перад тым intregrating requirejs,

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

was showing the value in input box.
But after integrating with requirejs, input box with type="number" not showing me the value.. input box with type="text" is working.

Як я магу паказаць значэнне з тыпам = «колькасць»?

дзякуй

27
Чаму вы налады як значэнне і НГ-мадэль ? ngModel размесціць cart.quantity ў свой ўваход аўтаматычна!
дададзена аўтар Jamie Pate, крыніца

11 адказы

Я проста пабег у гэтую ж праблему і ўдалося вырашыць. У маім выпадку, мадэль быць атрымана з дапамогай RESTful $ рэсурсаў і значэнне для сумы прадастаўляецца ў выглядзе радка ў поле, якое, у сваю чаргу, выцясняецца значэнне. Для вырашэння гэтай праблемы, я ў канчатковым выніку робіць наступнае ў маім кантролеры:

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

якая ператварае значэнне ў паплавок, перад пачаткам абнаўлення выгляду. Адзін Гоча я пабег у тым, што мая першая спроба была ўстаноўка $ scope.cart.quantity = parseFloat ($ scope.cart.quantity, 10) адразу пасля атрымаць . Гэта не працуе, так як кошт была перапісаная пры асінхронным выкліку атрымаць завершаны.

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

Спадзяюся, што гэта дапамагае.

28
дададзена
Гэта CoffeeScript. Я абнавіў адказ з Javascript, можа быць, гэта робіць яго больш выразным.
дададзена аўтар Ruy Diaz, крыніца
Я не атрымаў "Expense.get (ID: $ routeParams.id, (е) -> e.amount = parseFloat (e.amount, 10))" ... Вы можаце Pls ўдакладніць? ці вы можаце генераваць скрыпку?
дададзена аўтар Amb, крыніца
самая смешная памылка калі-небудзь
дададзена аўтар Rob, крыніца
<�Код> ParseInt () і parseFloat (<�флоат>) зрабіў трук па ініцыялізацыі, дзякуй.
дададзена аўтар Maxime Morin, крыніца
+1 У маім выпадку, я зрабіў на баку сервераў забяспечвае цэлае замест радка. Мая мадэль жыве на сэрвэры.
дададзена аўтар J. Bruni, крыніца
Я проста пабег у сапраўды такі ж пытанне звязвання з «$ адказу resource`. Вельмі шкада, што мы павінны разабраць лік відавочна пры злучэнні, але я мяркую, што гэта невялікая цана, каб заплаціць за праверкі мы атрымліваем бясплатна ў прадстаўленні для. У любым выпадку, дзякуй за рэгістрацыю, так як гэта хутка дапамагло мне прайсці міма гэтага.
дададзена аўтар mmacneil007, крыніца

Ваша пераплецены значэнне з'яўляецца радок не нумар .

Перш за ўсё, пераканайцеся, што ваш сервер пасылае нумар . Калі вы выкарыстоўваеце PHP, вы можаце выкарыстаць:

json_encode($array, JSON_NUMERIC_CHECK);

Вы таксама можаце ператварыць ваш радок у Int або паплавок з 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]);

Гэта не памылка, як і ў колькасці Уводзіцца прымае толькі сапраўдныя лікі (я спадзяюся).


<�Моцны> Заўвага:

Я таксама паспрабаваў звязаць НГ-значэнне з цэлалікавых фільтрам, але гэта wont't працу. Можа быць, таму што НГ-мадэлі гэта той, які пераплецены, калі абодва знайшлі (так, яны маюць аднолькавы ўзровень прыярытэту).

7
дададзена

Я вырашыць гэтую праблему, выкарыстоўваючы карыстацкую дырэктыву:

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 рэсурсу.

Абмежаваць гэтую дырэктыву, калі гэта неабходна :)

5
дададзена

Значэнне перавызначаць НГ-мадэлі. Выдаліце ​​ўласцівасць значэння, і вашы НГ-мадэль запоўніць уваход з колькасцю кошыка.

4
дададзена
заліку яе не працуе ..
дададзена аўтар Amb, крыніца

У мяне была такая ж праблема (з тыпам уваходнага = «дыяпазон» на самай справе), і вось маё рашэнне, выкарыстоўваючы карыстацкую дырэктыву:

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

Я спадзяюся, што гэта можа дапамагчы будучыняй наведвальнікам.

1
дададзена
Я змяніў вярнуцца value.toString (); у вяртання (значэнне || $ el.attr ( 'мін')) ToString() ;. .. працаваў добра +1
дададзена аўтар user4227915, крыніца

Я дадаў імя атрыбуту на ўваход і ён пачаў працаваць

1
дададзена
Дзіўна, але гэта працуе для мяне. Я не разумею, чаму. Дзякуючы.
дададзена аўтар mimic, крыніца
Я магу толькі выказаць здагадку, што гэта звязана з ngForm паколькі ngModelController не будзе даступны як ўласцівасць формы без імя? нічога ў кодзе (v1.5), каб пацвердзіць, што, хоць не бачачы.
дададзена аўтар Jamie Pate, крыніца

Дзіўна, у маім выпадку, выдаленне мін і макс атрыбуты з тып ўводу = «колькасць» працаваў для мяне. Я маю на ўвазе НГ-мадэль працаваў !!

Здаецца, зусім супрацьлеглае таму, што пісаў вышэй Arpit Кумар.

<�Р> AngularJS версія: 1.6.1
0
дададзена

I found this link, which helped me. It creates a string-to-number directive, which you can attach to the number inputs in a similar fashion, that Ruy Diaz showed: https://docs.angularjs.org/error/ngModel/numfmt

0
дададзена

Вашы НГ-мадэль у гэтым выпадку cart.quantity павінна быць лікам, а не радок.

0
дададзена

I also ran into the same problem іtried to find a solution all the was complex for a newbie then I came across a solution at the old version of angular at https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

у адпаведнасці з якім НГ-мадэль прымае радок абыходны шлях з'яўляецца тое, што мы вызначым

<�Р> <�моцны> мін </моцны> </р>

і

<�моцны> макс

значэнне пры выкарыстанні тыпу ўводу = «колькасць»

It worked for me іI hope that it work for others too

0
дададзена

If cart.quantity data type is not Number,it can't working>

Ваша патрэба ў $ Scope.cart.quantity = parseFloat ($ scope.cart.quantity);

0
дададзена