Enlace bidireccional con entrada de rango y número en AngularJS
Estoy empezando a jugar con AngularJS y trato de entender la técnica de enlace. Para empezar, traté de hacer una calculadora de conversión simple (docenas a piezas, piezas a docenas). Eso funcionó bien, pero cuando intenté unir ambosdistancia entrada y unnúmero entrada a la misma propiedad del modelonúmero entrada no se actualiza cuando eldistancia Se ajusta el valor. Tengo un jsfiddle mostrando el comportamiento:
javascript común para problemas rotos y de trabajo:
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;
});
}
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>
Sin embargo, uniendo dosnúmero Las entradas a la misma propiedad del modelo parecen funcionar bien, como se muestra en este violín:
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>
¿Alguna idea de cómo obtener undistancia ynúmero entrada vinculada a una propiedad de modelo único en AngularJS? Gracias.