ui-select कोणीय

Question

में चयनित विकल्प साफ़ करें कोई भी जानता है कि कोणीय में ui-select बॉक्स के चयनित मान को कैसे साफ़ किया जाए?

मैं select2 की कार्यक्षमता चाहता हूं जहां आपके पास चयन बॉक्स में एक छोटा एक्स है। ऐसा लगता है कि इसे अनुमति-स्पष्ट विधि मिली है जिसे 2 चुना गया है।

Answer 1

ui का चयन मैचों करता है कि के लिए एक विकल्प नहीं है allow-clear आपके लिए चीज, आपके पास दाईं ओर एक्स होगा और आप इसे क्लिक करके इसे साफ़ कर सकते हैं। https://github.com/angular-ui/ui-select/wiki/ui-select-match

त्वरित उदाहरण:

<ui-select-match allow-clear="true" placeholder="Select or search a country in the list..."> 
    <span>{{$select.selected.name}}</span> 
</ui-select-match> 

कार्य उदाहरण: http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview

Answer 2

जब आप चयन प्रदर्शित करते हैं तो आप एक छोटा एक्स बटन जोड़ सकते हैं।

<ui-select-match placeholder="Select or search a country in the list..."> 
    <span>{{$select.selected.name}}</span> 
    <button class="clear" ng-click="clear($event)">X</button> 
</ui-select-match> 

फिर आप क्लिक ईवेंट को बुलबुले से रोकें और खुली घटना को ट्रिगर करें। और आप चयनित मॉडल को ओवरराइट करके फ़ील्ड को साफ़ करते हैं।

$scope.clear = function($event) { 
    $event.stopPropagation(); 
    $scope.country.selected = undefined; 
}; 

यहां plnkr है। http://plnkr.co/edit/qY7MbR

Answer 3

यदि आप डिज़ाइन परिप्रेक्ष्य से बूटस्ट्रैप का उपयोग कर रहे हैं, तो आप एक एफए-निकालने आइकन का भी उपयोग कर सकते हैं।

इसके अतिरिक्त, उपयोगिता परिप्रेक्ष्य से, आप बाईं ओर निकालें आइकन को संरेखित करना चाह सकते हैं।

जे एस:

<ui-select-match placeholder="Select or find..."> 
    <button class="clear-btn" ng-click="clear($event)"> 
     <span class="fa fa-remove"></span> 
    </button> 
    <span class="clear-btn-offset">{{$select.selected}}</span> 
</ui-select-match> 

सीएसएस:

.select2 .clear-btn { 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 5px 10px; 
    position: absolute; 
    left: -2px; 
    top: 1px; 
} 

.clear-btn-offset { 
    position: absolute; 
    left: 25px; 
} 

निर्देश कोड पर:

$scope.clear = function($event) { 
    $event.stopPropagation(); 
    // Replace the following line with the proper variable 
    $scope.country.selected = undefined; 
}; 

Answer 4

नोट: अगर हम उस मामले में टैगिंग और टैगिंग-लेबल = "false" का इस्तेमाल किया की अनुमति देने के साफ कार्यक्षमता काम नहीं।

कस्टम स्पष्ट कार्यक्षमता

एचटीएमएल कोड

<ui-select-match placeholder=”Enter table…”> 
<span>{{$select.selected.description || $select.search}}</span> 
<a class=”btn btn-xs btn-link pull-right” ng-click=”clear($event, $select)”><i class=”glyphicon glyphicon-remove”></i></a> 
</ui-select-match> 

नियंत्रक कार्रवाई कोड

function clear($event, $select){ 
//stops click event bubbling 
$event.stopPropagation(); 
//to allow empty field, in order to force a selection remove the following line 
$select.selected = undefined; 
//reset search query 
$select.search = undefined; 
//focus and open dropdown 
$select.activate(); 
}