双向与AngularJS范围和数量的输入结合 [英] Two-way binding with range and number input in AngularJS

问题描述

我刚开始玩弄AngularJS并试图了解绑定技术。对于初学者来说，我试图做一个简单的转换计算器（几十到块，块到几十个）。这工作很好，但是当我试图结合既有的范围输入和数量输入相同的模型属性在数量输入不更新当在范围值进行调整。我有一个显示的行为的jsfiddle：

I'm just starting to play around with AngularJS and trying to understand the binding technique. For starters, I tried to make a simple conversion calculator (dozens to pieces, pieces to dozens). That worked well, but when I tried to bind both a range input and a number input to the same model property the number input does not update when the range value is adjusted. I have a jsfiddle showing the behavior:

有关断和工作小提琴常见的JavaScript：

common javascript for broken and working 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>

但是，结合两个数量输入相同的模型属性似乎做工精细如本琴：

However, binding two number inputs to the same model property seems to work fine as shown in this fiddle:

工作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一个模型属性？谢谢你。

Any ideas how to get a range and number input bound to a single model property in AngularJS? Thanks.

推荐答案

这里的问题是输入型=系列作品是字符串并不会是数字 （当输入类型=数字只能用数字作品）。

The problem here is that the input type="range" works with Strings and not with Numbers (while input type="number" only works with Numbers).

<一个href=\"http://www.w3.org/wiki/HTML/Elements/input/range\">http://www.w3.org/wiki/HTML/Elements/input/range

档状态重新presents一个控制元素的值设置为
  一个字符串，再presenting一个数字。

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

如果您添加 VAL = parseInt函数（VAL）如您在数量第一条指令设定器它应该工作：

If you add val = parseInt(val) as your first instruction on the qty setter it should work:

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

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

这篇关于双向与AngularJS范围和数量的输入结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！