कोणीय यूआई का चयन करें क्लिक

Question

मैं UI-Select उपयोग कर रहा हूँ पर आइटम को निकालने, मैंने देखा है कि कोई भी टैग बटन पर क्लिक करने नीले बनाता है, जो मैं करना चाहते हैं क्या कोई उद्देश्य नहीं है। अगर क्लिक किया जाता है तो मैं उन्हें हटा दूंगा। निरीक्षण मैंने देखा एक 'एक्स' ही सक्रिय बंद निम्नलिखित:

ng-click="$selectMultiple.removeChoice($index)" 

कुछ खुदाई मैं जहां इस, यह "मैच multiple.tpl.html" बंद निकाल दिया जाता है टेम्पलेट पाया कर। मैंने एनजी-क्लिक को इनपुट में कॉपी किया, इसे निम्नलिखित बना दिया।

<span class="ui-select-match"> 
    <span ng-repeat="$item in $select.selected"> 
    <span 
     class="ui-select-match-item btn btn-default btn-xs" 
     tabindex="-1" 
     type="button" 
     ng-disabled="$select.disabled" 

     ng-click="$selectMultiple.removeChoice($index)" 
     ng-class="{'btn-primary':$selectMultiple.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}" 
     ui-select-sort="$select.selected"> 
     <span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span> 
    <span uis-transclude-append></span> 
    </span> 
</span> 
</span> 

यह टैग प्रणाली तोड़ दिया (छवि देखें)

संपादित करें - निम्नलिखित की कोशिश की, त्रुटि चला गया है लेकिन क्लिक कुछ नहीं कर रहा है।

 ng-click="$selectMultiple.activeMatchIndex.removeChoice($index)" 

मैं के रूप में 'एक्स' के लिए विरोध टैग को एनजी-cick कैसे संलग्न कर सकते हैं?

Answer 1

आप सही तर्ज पर कर रहे हैं। मैं (कोणीय कोड सहित) अपना पूरा कोड नहीं देख सकते हैं, तो यह कारण है कि यह काम नहीं कर रहा है देखने के लिए मुश्किल है, फिर भी this Fiddle एक काम उदाहरण दिखाता है - ui-चयन में नामों में से एक जोड़े को जोड़ने तो नाम पर कहीं भी क्लिक (बस नहीं 'एक्स') उन्हें हटाने के लिए।

ui-चयन के रूप में कॉन्फ़िगर किया गया है इस प्रकार है:

<ui-select multiple tagging ng-model="vm.selected" theme="bootstrap"> 
    <ui-select-match placeholder="Pick one...">{{$item.value}}</ui-select-match> 
    <ui-select-choices repeat="val in vm.values | filter: $select.search track by val.value"> 
     <div ng-bind="val.value | highlight: $select.search"></div> 
    </ui-select-choices> 
    </ui-select> 

निम्नलिखित कोड एक कस्टम जिस पर एनजी-क्लिक करें घटना है साथ ओवरराइड करता है डिफ़ॉल्ट 'बूटस्ट्रैप/मैच का multiple.tpl.html' टेम्पलेट माता-पिता अवधि (जैसे तुमने किया था) - ध्यान दें अवधि ng-click="$selectMultiple.activeMatchIndex = $index;" पर एक एनजी-क्लिक करें पहले से ही था, मैं इस को हटा दें और ng-click="$selectMultiple.removeChoice($index)" से बदलने के लिए किया था। कोड के इस ब्लॉक ui का चयन करने के बजाय यह डिफ़ॉल्ट रूप से एक है इस कस्टम टेम्पलेट का उपयोग करने बताता है:

app.run(['$templateCache', function($templateCache) { 
    $templateCache.put('bootstrap/match-multiple.tpl.html', 
    '<span class="ui-select-match">' + 
     '<span ng-repeat="$item in $select.selected track by $index">' + 
      '<span ' + 
       'ng-click="$selectMultiple.removeChoice($index)" ' + 
       'class="ui-select-match-item btn btn-default btn-xs" ' + 
       'tabindex="-1" ' + 
       'type="button" ' + 
       'ng-disabled="$select.disabled" ' + 
       'ng-class="{\'btn-primary\':$selectMultiple.activeMatchIndex === $index, \'select-locked\':$select.isLocked(this, $index)}" ' + 
       'ui-select-sort="$select.selected">' + 
      '<span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span>' + 
      '<span uis-transclude-append></span>' + 
     '</span>' + 
     '</span>' + 
    '</span>'); 
}]);