AngularJSで範囲と数値を入力する双方向バインド

Question

AngularJSで遊んで始め、バインディングテクニックを理解しようとしています。はじめに、私は単純な変換電卓（数十から数十まで）を作ろうとしました。それはうまくいったが、私は範囲値を調整する際数入力が更新されない同じモデルプロパティに範囲入力と数入力の両方に結合しようとしたとき。破壊され、作業フィドルのため

共通のjavascript：

var myApp = angular.module('myApp', []); 

myApp.controller('CalcCtrl', function ($scope) { 
    var num = 0.0; 
    $scope.qty = new Quantity(12); 
    $scope.num = num; 
}); 

function Quantity(numOfPcs) { 
    var qty = numOfPcs; 
    var dozens = numOfPcs/12; 

    this.__defineGetter__("qty", function() { 
     return qty; 
    }); 

    this.__defineSetter__("qty", function (val) { 
     qty = val; 
     dozens = val/12; 
    }); 

    this.__defineGetter__("dozens", function() { 
     return dozens; 
    }); 

    this.__defineSetter__("dozens", function (val) { 
     dozens = val; 
     qty = val * 12; 
    }); 
} 

BROKEN FIDDLE

HTML：しかし

<div ng-controller="CalcCtrl"> 
    <form> 
     <label for="pcs">Pieces:</label> 
     <input type="number" min="0" ng-model="qty.qty" size="20" id="pcs" 
     /> 
     <input type="range" min="0" max="100" ng-model="qty.qty" /> 
     <br/> 
     <label for="numOfDozens">Dozens</label> 
     <input type="number" min="0" ng-model="qty.dozens" size="20" 
     id="numOfDozens" /> 
    </form> 
</div> 

、結合2つの数入力に私は行動を示すjsfiddleを持っています同じモデルのプロパティは、このフィドルで示されているようにうまく動作しているようです：

WORKING FIDDLE

HTML：

<div ng-controller="CalcCtrl"> 
    <form> 
     <label for="pcs">Pieces:</label> 
     <input type="number" min="0" ng-model="qty.qty" size="20" id="pcs" 
     /> 
     <input type="number" min="0" max="100" ng-model="qty.qty" /> 
     <br/> 
     <label for="numOfDozens">Dozens</label> 
     <input type="number" min="0" ng-model="qty.dozens" size="20" 
     id="numOfDozens" /> 
    </form> 
</div> 

AngularJSで単一のモデルプロパティにバインド範囲と数入力を取得するにはどのように任意のアイデア？ありがとう。

Answer 1

問題ここでは、（入力タイプ=「数」は数字のみで動作しながら）入力タイプ=「範囲」番号とストリングとしないで動作するということです。

http://www.w3.org/wiki/HTML/Elements/input/range

レンジ状態は に番号を表す文字列を要素の値を設定するためのコントロールを表します。

あなたはそれが動作するはずqtyセッターにあなたの最初の命令としてval = parseInt(val)を追加する場合：

this.__defineSetter__("qty", function (val) {   
    val = parseInt(val); 
    qty = val; 
    dozens = val/12; 
}); 

はjsfiddle：http://jsfiddle.net/bmleite/2Pk3M/2/

Answer 2

私はこのソリューションは、より汎用的であると思います。

myApp.directive('input', function() { 
return { 
    restrict: 'E', 
    require: '?ngModel', 
    link: function(scope, element, attrs, ngModel) { 
     if ('type' in attrs && attrs.type.toLowerCase() === 'range') { 
      ngModel.$parsers.push(parseFloat); 
     } 
    } 
}; 

}）;

full explanation

Answer 3

あなたはng-model-optionsを使用してそれを解決することができます。私はjsfiddleを変更し、ここでのコードは次のとおりです。

HTML：

<div ng-controller="CalcCtrl"> 
    <form> 
     <label for="pcs">Pieces:</label> 
     <input type="number" min="0" ng-model="qty.qty" size="20" id="pcs" ng-model-options="{ getterSetter: true }"/> 
     <input type="range" min="0" max="100" ng-model="qty.qty" ng-model-options="{ getterSetter: true }"/> 
     <br/> 
     <label for="numOfDozens">Dozens</label> 
     <input type="number" min="0" ng-model="qty.dozens" size="20" 
     id="numOfDozens" ng-model-options="{ getterSetter: true }"/> 
    </form> 
</div> 

JS：

var myApp = angular.module('myApp', []); 

myApp.controller('CalcCtrl', function ($scope) { 
    var num = 1.0; 
    $scope.qty = { 
    qty:function (val) { 
     return arguments.length ? (num = parseFloat(val)) : num; 
    }, 
    dozens: function (val) { 
      return arguments.length ? (num = val*12) : num/12; 
     } 
    }; 
});