2013-02-27 5 views
17

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

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

+0

मैं प्रकार नहीं लगता कि = "सीमा" समर्थित है: https://github.com/angular/angular.js/issues/1189 आपको इसके लिए अपना खुद का निर्देश लिखना होगा। –

उत्तर

17

समस्या है कि यहाँ इनपुट प्रकार = "सीमा" नंबर (इनपुट प्रकार = "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/

+14

कोई रेंज इनपुट नहीं है मूल रूप से एक संख्या का चयन करें? वे तारों का उपयोग क्यों कर रहे हैं? –

+6

यह 'parseInt (वैल, 10) होना चाहिए;' –

+1

@LiviuT। वे शायद पीछे की तरफ संगत होने के लिए एक स्ट्रिंग का इस्तेमाल करते थे। पुराने ब्राउज़र पर जो 'टाइप = "रेंज" 'लागू नहीं करते हैं,' इनपुट 'अभी भी एक स्ट्रिंग-प्रकार' मान' के साथ टेक्स्ट फ़ील्ड के रूप में प्रयोग योग्य होगा। 'मूल्य' बनाना अभी भी नए ब्राउज़र पर एक स्ट्रिंग ब्राउज़र संगतता बग से बचाता है। –

7

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

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

+0

मुझे यह समाधान पसंद है। हालांकि मैंने 'संख्या' के साथ 'parseFloat' को बदल दिया ;-) – joeytwiddle

0

आप 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; 
     } 
    }; 
}); 
संबंधित मुद्दे