web-dev-qa-db-ja.com

入力タイプ「番号」のng-modelがangularjsを動作しない

Requirejsを統合する前に、requirejsをangular app ..と統合しました。

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

入力ボックスに値を表示していました。
[。

Type = "number"で値を表示するにはどうすればよいですか？

ありがとう

javascriptangularjsrequirejs
29
Amb

私はちょうどこの同じ問題に遭遇し、それをなんとか解決しました。私の場合、モデルはRESTful _$resource_を介して取得されており、金額の値はフィールドに文字列として提供されており、その値は順番に値を消去します。これに対処するために、コントローラーで次のことを実行しました。

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

ビューを更新する前に、値をフロートに変換します。私が遭遇した1つの落とし穴は、最初の試みが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
_

お役に立てれば。

29
Ruy Diaz

バインドされた値は、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は、両方が見つかったときにバインドされるものです（そう、それらは同じ優先順位レベルを持っています）。

9
soyuka

カスタムディレクティブを使用してこの問題を解決します。

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応答を変更する必要はありません。

必要に応じてこのディレクティブを制限してください:)

6
Rafael Motta

値はng-modelによってオーバーライドされます。値のプロパティを削除すると、ng-modelは入力にカートの数量を入力します。

4
TidharPeer

入力に名前属性を追加し、機能し始めました

1
Jamie Pate

私は同じ問題を抱えていました（実際には入力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=.........

これが将来の訪問者に役立つことを願っています。

1
Rémi

cart.quantityデータ型がNumberではない場合、機能しません。

あなたの必要性

$scope.cart.quantity = parseFloat($scope.cart.quantity);
1
Harry Young

このリンクを見つけて、助けてくれました。これは、Ruy Diazが示したように、文字列から数値へのディレクティブを作成します。これは、同様の方法で数値入力にアタッチできます。 https://docs.angularjs.org/error/ngModel/numfmt

0
Lajos Meszaros

奇妙なことに、私の場合、input type="number"からminおよびmax属性を削除するとうまくいきました。 ng-modelが機能したことを意味します!!

上記のarpit kumarの投稿とはまったく逆のようです。

AngularJSバージョン：1.6.1

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

私も同じ問題に遭遇し、初心者のためにすべてが複雑だった解決策を見つけようとしましたが、古いバージョンのangular at https：// docs.angularjs.org/api/ng/input/input%5Bnumber%5D

どのng-modelが文字列を受け入れるかに応じて、回避策は定義することです

min

そして

max

input type = "number"を使用しているときの値

それは私のために働いたし、私はそれが他の人のためにも働くことを願っています

0
arpit kumar

この場合、ng-modelはcart.quantityであり、文字列ではなく数字である必要があります。

0
Memonic