विकल्प समूह का उपयोग किए जाने पर एंगुलर यूआई के साथ सही ढंग से चयन 2 टैग कैसे प्राप्त करें?

Question

मैं प्रारंभ करने के लिए अपने कोणीय ui select2 निर्देश प्राप्त करने का प्रयास कर रहा हूं और विकल्प समूहों के साथ काम करने में असमर्थ रहा हूं।

कोड:

function testCtrl1($scope) 
{ 
    $scope.selectedOptions = ['1']; 
    $scope.categories = [ 
      {label: 'cat1', options: [{desc: 'one', value: 1}]}, 
      {label: 'cat2', options: [{desc: 'two', value: 2}]} 
    ]; 
} 

HTML:

<select multiple ui-select2 ng-model="selectedOptions" style="width: 300px"> 
    <optgroup ng-repeat="category in categories" label="{{category.label}}"> 
     <option ng-repeat="option in category.options" value="{{option.value}}">{{option.desc}} - {{option.value}}</option> 
    </optgroup> 
</select> 

फिडल: मैं निम्नलिखित jsfiddle बनाया।

ऐसा करने पर मुझे लगता है कि अगर मैं दूसरा चयन 2 निर्देश शामिल करता हूं जिसमें विकल्प समूह (अजीब) शामिल नहीं है तो यह सही ढंग से प्रारंभ होगा। दूसरे चयन 2 सहित मुझे कुछ अन्य अजीब व्यवहार दिखाई देता है लेकिन मैं इसके बारे में बहुत चिंतित नहीं हूं क्योंकि मेरा लक्ष्य सिर्फ testCtrl1 काम करने के लिए है।

Answer 1

डाउनलोड नवीनतम कोणीय-ui Select2 और अद्यतन लाइन 24:

repeatOption = tElm.find('optgroup[ng-repeat], optgroup[data-ng-repeat], option[ng-repeat], option[data-ng-repeat]'); 

अब यह विकल्प समूह का समर्थन करता है।

Answer 2

select2 श्रेणीबद्ध डेटा के माध्यम से <optgroup> का समर्थन करता है, आप कर सकते हैं पास-थ्रू करने के बजाय ng-repeat का उपयोग कर के डेटा के रूप में एक संरचित वस्तु,
http://ivaynberg.github.io/select2/#data_array
भी पेज में "उदाहरण श्रेणीबद्ध डेटा" के लिए खोज देखें।

जे एस:

$scope.model = { 
    data: [ 
     // both 'id' and 'text' are needed unless you write custom functions 
     { text: 'cat1', children: [{id: 1, text: 'one'}] }, 
     { text: 'cat2', children: [{id: 2, text: 'two'}] } 
    ] 
]; 

HTML: [ {id: 1, text: 'one'} ]:

<input type="hidden" multiple ui-select2="model" 
    ng-model="selectedOptions" style="width: 300px"> 

selectedOptionsवस्तुओं की एक सरणी हो जाएगा।
http://plnkr.co/edit/gist:4279651?p=preview

संपादित करें:

पास के माध्यम से निर्देश के माध्यम से के लिए, कोणीय यूआई के डेमो देखने के साइट के लिए अद्यतन कोड और संदर्भ

Answer 3

वैसे मैं एक ही बाधा को प्राप्त कर चुका हूं और अपना समाधान साझा करना चाहता हूं। Select2 optgroup ng-repeat विशेषता नहीं देख रहा था। आपको इसे अपने कोणीय ui select2 निर्देश में जोड़ना होगा।

बदलें इस:

repeatOption = tElm.find('option[ng-repeat], option[data-ng-repeat]'); 

कि करने के लिए

: अगर यह एक साफ समाधान है, लेकिन यह मेरे लिए काम करता

repeatOption = tElm.find('optgroup[ng-repeat], optgroup[data-ng-repeat], option[ng-repeat], option[data-ng-repeat]'); 

सुनिश्चित नहीं हैं।

Github issue