अंगुलरजेएस

Question

में रेंज और संख्या इनपुट के साथ दो-तरफा बाध्यकारी मैं अंगुलरजेएस के साथ खेलना शुरू कर रहा हूं और बाध्यकारी तकनीक को समझने की कोशिश कर रहा हूं। शुरुआत करने वालों के लिए, मैंने एक साधारण रूपांतरण कैलकुलेटर (दर्जनों टुकड़े, दर्जनों के टुकड़े) बनाने की कोशिश की। यही कारण है कि अच्छी तरह से काम किया, लेकिन जब मैं दोनों एक रेंज इनपुट और एक ही मॉडल संपत्ति जब रेंज मूल्य निकाला जाता है संख्या इनपुट अपडेट नहीं करता करने के लिए एक संख्या इनपुट बाध्य करने की कोशिश की।

टूट और काम 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

एचटीएमएल:

<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> 

हालांकि, बंधन दो संख्या आदानों की मैं व्यवहार को दर्शाने वाला एक jsfiddle है इस मॉडल में दिखाए गए अनुसार एक ही मॉडल प्रॉपर्टी ठीक काम करती है:

WORKING FIDDLE

एचटीएमएल:

<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 में एक मॉडल संपत्ति के लिए बाध्य कर पाने के लिए? धन्यवाद।

Answer 1

समस्या है कि यहाँ इनपुट प्रकार = "सीमा" नंबर (इनपुट प्रकार = "number" केवल संख्या के साथ काम करता है, जबकि) के साथ स्ट्रिंग्स और नहीं के साथ काम करता है।

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

रेंज राज्य एक स्ट्रिंग एक नंबर का प्रतिनिधित्व के तत्व का मान स्थापित करने के लिए एक नियंत्रण प्रतिनिधित्व करता है।

आप qty सेटर पर अपना पहला अनुदेश के रूप में val = parseInt(val) जोड़ देते हैं तो यह काम करना चाहिए:

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

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

Answer 2

मुझे लगता है कि इस समाधान अधिक सामान्य है।

myApp.directive('input', function() { 
return { 
    restrict: 'E', 
    require: '?ngModel', 
    link: function(scope, element, attrs, ngModel) { 
     if ('type' in attrs && attrs.type.toLowerCase() === 'range') { 
      ngModel.$parsers.push(parseFloat); 
     } 
    } 
}; 

});

full explanation

Answer 3

आप ng-model-options का उपयोग कर इसे हल कर सकते हैं।मैं बदल jsfiddle और यहाँ कोड है:

एचटीएमएल:

<div ng-controller="CalcCtrl"> 
    <form> 
     <label for="pcs">Pieces:</label> 
     <input type="number" min="0" ng-model="qty.qty" size="20" id="pcs" ng-model-options="{ getterSetter: true }"/> 
     <input type="range" min="0" max="100" ng-model="qty.qty" ng-model-options="{ getterSetter: true }"/> 
     <br/> 
     <label for="numOfDozens">Dozens</label> 
     <input type="number" min="0" ng-model="qty.dozens" size="20" 
     id="numOfDozens" ng-model-options="{ getterSetter: true }"/> 
    </form> 
</div> 

js:

var myApp = angular.module('myApp', []); 

myApp.controller('CalcCtrl', function ($scope) { 
    var num = 1.0; 
    $scope.qty = { 
    qty:function (val) { 
     return arguments.length ? (num = parseFloat(val)) : num; 
    }, 
    dozens: function (val) { 
      return arguments.length ? (num = val*12) : num/12; 
     } 
    }; 
});