0

このフィドルをチェックしてください：http：//jsfiddle.net/bwjbz/6/

私は正の整数を厳密に強制しようとしています。私はいくつかの方法を試しましたが、探しているものが得られないようです。（数回試してみると、入力に数字以外の数字または負の数が残ってしまう可能性があります）。

上記のフィドルに加えて、数値フィルターを使用して、独自のディレクティブを作成してみました。

数値フィルター：

<input type="number" min="0" max="1000" value="{{itm.qty | number:0}}" required data-ng-model="itm.qty" data-ng-change="setQty()" data-whole-number>

data-whole-numberディレクティブに気付くでしょう。私はまだディレクティブに完全に慣れていませんが、これはそれです：

app.directive('wholeNumber', function() {
  return function(scope, elem, attrs) {
    elem.on("blur", function() {
      var num;
      num = parseInt(elem.val(), 10);
      num = Math.abs(num);
      scope.$apply(elem.val(num));
    });
  };
});

ディレクティブ自体は正しいDOM操作を行いますが、モデルは新しい値で更新されません。

したがって、この質問には2つの側面があります。

  1. フィドルはモデルに正しい値を設定するように機能しますが、モデルのテキストは更新されません。ただし、別の方法では、モデルitmの数量を1に設定すると、モデルと表示値の両方が変更されます。実際にモデルが正しく変更されていることに気付くでしょう（たとえば、値が1.56に設定されている場合、バインディング、フットボールの数= 1に注意してください）。

  2. ディレクティブがモデルへの変更を伝播しないのはなぜですか？

よろしくお願いします、-ブライアン

4

2 に答える 2

3

更新: ディレクティブを使用した作業フィドル: http://jsfiddle.net/mrajcok/U7Je2/

顕著な点:

<input type="number" min="0" max="{{maxValue}}" data-ng-model="itm.qty" whole-number>

link: function(scope, elem, attrs) {
        elem.on("blur", function() {
            var num = Math.abs(parseInt(elem.val(), 10));
            num = num > scope.maxValue ? 0 : num;
            scope.itm.qty = num
            scope.$apply();

            // or, the above two lines can be rewritten as
            scope.$apply(scope.itm.qty = num);

        // or, the blur function can be rewritten as
        elem.on("blur", function() {
            scope.$apply(function() {
                var num = Math.abs(parseInt(elem.val(), 10));
                num = num > scope.maxValue ? 0 : num;
                scope.itm.qty = num;
            });
        });

元の「答え」：

あなたの最初のフィドルに関して、同様の問題が SO で最近発生しました。AngularJS - $scope.value のリセットがテンプレートの値を変更しない (ランダムな動作)

その投稿の $timeout ソリューションを問題に適用する場合、 setQty() ロジックを $timeout 関数でラップすると、ある程度機能します。このフィドルを参照してください。「abc」と同様に「2-2-3-4」のような「数字」を入力できるため、「並べ替え」と言います。これらの偽の値は、フォーカスを変更するとクリアされます。Angular はこれらの偽のエントリに対して setQty() を呼び出していないようです...理由はわかりません。

于 2012-09-08T00:59:26.250 に答える