Cancella l'opzione selezionata in ui-select angolare

Question

Qualcuno sa come cancellare il valore selezionato di una casella di selezione ui in angolare?

Voglio la funzionalità di select2 dove hai una piccola x nella selectbox. Non sembra che abbia il metodo allow-clear che select2 ha ottenuto.

Answer 1

C'è un'opzione allow-clear per ui-select-match che fa la cosa per te, avrai la x sulla destra e puoi cancellarla cliccando su di essa. https://github.com/angular-ui/ui-select/wiki/ui-select-match

esempio rapida:

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

esempio di lavoro: http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview

Answer 2

È possibile aggiungere un piccolo tasto X quando si visualizza la selezione.

<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> 

Quindi si interrompe l'evento di clic dall'effervescenza e si attiva l'evento aperto. E si cancella il campo sovrascrivendo il modello selezionato.

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

Ecco il plnkr. http://plnkr.co/edit/qY7MbR

Answer 3

Se si utilizza il bootstrap, dal punto di vista del progetto, è possibile utilizzare anche un'icona di rimozione.

Inoltre, dal punto di vista dell'usabilità, è possibile allineare l'icona di rimozione a sinistra.

Il JS:

<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> 

Il CSS:

.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; 
} 

sul codice direttiva:

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

Answer 4

Nota: se abbiamo usato il tagging e tagging-label = "false" in quel caso allow-chiaro la funzionalità non funziona.

funzionalità personalizzate chiaro

codice HTML

<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> 

controller Codice azione

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(); 
}