在AngularJS中双向绑定范围和数字输入

我刚刚开始与AngularJS一起玩,并试图了解绑定技巧。对于初学者,我试图做一个简单的转换计算器(几十个到几个,几十个)。这很好,但是当我尝试将范围输入和数字输入绑定到相同的模型属性时,在调整范围值时,输入的数字不会更新。我有一个jsfiddle显示行为:

常见的JavaScript为破碎和工作的fiddles:

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>

然而,将两个数字输入绑定到相同的模型属性似乎可以正常工作,如这个小提示

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?谢谢。

这里的问题是输入类型=“范围”与字符串不匹配,而不是数字(而输入类型=“数字”仅适用于数字)。

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

The range state represents a control for setting the element’s value to
a string representing a number.

如果您添加val = parseInt(val)作为您的第一个指令在数量设置器应该工作:

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

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

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...