Я только начинаю играть с AngularJS и пытаюсь понять технику привязки. Для начала я попытался сделать простой калькулятор конверсии (десятки штук, штук до десятков). Это сработало хорошо, но когда я попытался связать как вход диапазон, так и вход число для того же свойства модели, вход номер не обновляется когда значение диапазон настроено. У меня есть jsfiddle, показывающий поведение:
общий 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;
});
}
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>
Однако привязка двух число входов к одному и тому же свойству модели, кажется, работает нормально, как показано в этой скрипте:
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? Спасибо.