multiselect - ui-select angularjs

Borrar la opción seleccionada en ui-select angular

Question

¿Alguien sabe cómo borrar el valor seleccionado de un cuadro ui-select en angular?

Quiero la funcionalidad de select2 donde tienes una pequeña x en el cuadro de selección. No parece que tenga el método allow-clear que select2 obtuvo.

Answer 1

Puede agregar un pequeño botón X cuando muestre la selección.

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

Luego, detiene el evento de clic y aparece el evento abierto. Y borra el campo sobrescribiendo el modelo seleccionado.

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

Aquí está el plnkr. http://plnkr.co/edit/qY7MbR

Answer 2

Si está utilizando bootstrap, desde la perspectiva del diseño, también podría usar un icono de eliminación de fa.

Además, desde la perspectiva de usabilidad, es posible que desee alinear el icono de eliminación a la izquierda.

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

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

En el código de la directiva:

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

Answer 3

Si está utilizando el tema select2, hay una opción de permiso allow-clear en la directiva ui-select-match que lo hace por usted. Tendrá la x a la derecha y puede borrarla haciendo clic en ella. https://github.com/angular-ui/ui-select/wiki/ui-select-match

Ejemplo rápido:

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

Ejemplo de trabajo: http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview

Actualmente, esto no funciona con el programa bootstrap o selectize.

Answer 4

Nota: si usamos tagging y tagging-label = "false" en ese caso, la funcionalidad allow-clear no funcionará.

Funcionalidad clara personalizada

código 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>

Código de acción del controlador

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