2013-05-17 9 views
67

मैंने इस प्रश्न से पूछने से पहले इसका उल्लेख किया।एंगुलरजेएस: एनजी-मॉडल चेकबॉक्स के लिए एनजी-चेक करने के लिए बाध्यकारी नहीं है

AngularJs doesn't bind ng-checked with ng-model

ng-checkedhtml तरफ true लिए मूल्यांकन किया जाता है, तो ng-model अद्यतन नहीं किया गया है। मैं ऊपर दिए गए प्रश्न में सुझाए गए अनुसार ng-repeat नहीं कर सकता क्योंकि मुझे प्रत्येक चेकबॉक्स के लिए कुछ स्टाइल का उपयोग करना है।

यहां मेरी समस्या को दर्शाने के लिए बनाई गई प्लंकर है।

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

जो मैं चाहता देखने के लिए, कंसोल खोलें, और सिर्फ Submit बटन पर क्लिक करें। कृपया किसी भी चेकबॉक्स की जांच न करें।

अग्रिम धन्यवाद!

उत्तर

107

ngModel और ngChecked एक साथ उपयोग करने के लिए नहीं हैं।

ngChecked एक अभिव्यक्ति की उम्मीद कर रहा है, इसलिए ng-checked="true" कहकर, आप मूल रूप से कह रहे हैं कि चेकबॉक्स हमेशा डिफ़ॉल्ट रूप से चेक किया जाएगा।

आप अपने मॉडल पर बूलियन संपत्ति से जुड़े ngModel का उपयोग करने में सक्षम होना चाहिए। यदि आप कुछ और चाहते हैं, तो आपको या तो ngTrueValue और ngFalseValue (जो केवल स्ट्रिंग का समर्थन करता है) का उपयोग करने की आवश्यकता है, या अपना स्वयं का निर्देश लिखें।

यह ठीक है कि आप क्या करने की कोशिश कर रहे हैं? यदि आप डिफ़ॉल्ट रूप से पहले चेकबॉक्स को चेक करना चाहते हैं, तो आपको अपना मॉडल बदलना चाहिए - item1: true,

संपादित करें: आपको मॉडल की वर्तमान स्थिति डीबग करने के लिए अपना फॉर्म जमा करने की आवश्यकता नहीं है, बीटीडब्ल्यू, आप अपने HTML (या <pre>{{testModel|json}}</pre>) में {{testModel}} को डंप कर सकते हैं। इसके अलावा आपके ngModel विशेषताओं को ng-model="testModel.item1" पर सरलीकृत किया जा सकता है।

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

+0

'एनजी-checked' लिए गणना की जाती है एक अभिव्यक्ति से सच है।'एनजी-मॉडल' को इंगित करने के लिए, मैं वहां सच साबित हुआ। नियंत्रक की शुरुआत करते समय, मैं सभी चेकबॉक्स को अनचेक करना चाहता हूं। कुछ AJAX अनुरोध के बाद, मैं चेकबॉक्स को चेक करने के लिए 'ng-check' की गणना करता हूं। यह तब होता है जब मेरा 'एनजी-मॉडल' अद्यतन नहीं होता है। – Abilash

+5

@Abilash आपको 'ngchecked' का उपयोग नहीं करना चाहिए। आपका मॉडल ठीक है, आपको बस अपने AJAX कॉलबैक में 'testModel.item1 = true' सेट करने की आवश्यकता है और फिर अपने दृश्य को अपडेट करने के लिए '$ scope। $ लागू करें()' पर कॉल करें। – Langdon

+2

हमने अभी 'एनजी-चेक'' के उपयोग में 'एनजी-चेक' का उपयोग करने की गलती की है ... कभी नहीं! – g00glen00b

10

आप एनजी-मान-सच का उपयोग कोणीय कि आपके एनजी मॉडल एक स्ट्रिंग है बताने के लिए कर सकते हैं।

मैं कर सकता है केवल करने के एनजी-सच मूल्य काम कर रहा है, तो मैं (के रूप में आधिकारिक कोणीय डॉक्स में दिखाया गया है - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D) तो जैसे अतिरिक्त उद्धरण जोड़ा

ng-true-value="'1'" 
1

क्या तुम कर सकते हो से गुजर रहा ng-repeat का उपयोग करें परिणाम के आधार पर अपनी शैलियों को लागू करने के लिए ng-checked पर और जो भी ng-class का उपयोग कर रहे हैं उसका मूल्य।

मैंने हाल ही में कुछ ऐसा किया और यह मेरे लिए काम किया।

1

में के रूप में घोषणा कर सकते हैं एनजी-init भी सच

<!doctype html> 
<html ng-app="plunker" > 
    <head> 
    <meta charset="utf-8"> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> 
    <script src="app.js"></script> 
    </head> 
    <body ng-controller="MainCtrl" ng-init="testModel['item1']= true"> 
    <label><input type="checkbox" name="test" ng-model="testModel['item1']" /> Testing</label><br /> 
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br /> 
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br /> 
    <input type="button" ng-click="submit()" value="Submit" /> 
    </body> 
</html> 

रही और आप पहले से एक का चयन करें और वस्तु कर सकते हैं इसके अलावा यहाँ, सही गलत दिखाया गया है, flase

संबंधित मुद्दे