17

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>

ただし、2 つの数値入力を同じモデル プロパティにバインドすると、次のフィドルに示すように正常に動作するようです。

働くフィドル

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 で単一のモデル プロパティにバインドされた範囲と数値の入力を取得する方法はありますか? ありがとう。

4

3 に答える 3

17

ここでの問題は、input type="range"が数値ではなく文字列で機能することです(input type="number" は数値でのみ機能します)。

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

範囲状態は、要素の値を数値を表す文字列に設定するためのコントロールを表します。

セッターval = parseInt(val)の最初の命令として追加すると、動作するはずです：qty

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

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

于 2013-02-27T16:04:15.567 に答える