Удалить выбранную опцию в ui-select угловой

Question

Кто-нибудь знает, как очистить выбранное значение окна выбора ui в угловом?

Я хочу функциональность select2, где у вас есть маленький x в selectbox. Не похоже, что у него есть метод clear-clear, который select2 получил.

Answer 1

Существует вариант allow-clear для Ui-Select-матч, который делает вещь для вас, у вас будет x справа, и вы можете очистить его, щелкнув по нему. 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

Вы можете добавить небольшую кнопку X при отображении выбора.

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

Затем вы останавливаете событие click от пузырьков и запускаете событие open. И вы очищаете поле, перезаписывая выбранную модель.

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

Это plnkr. http://plnkr.co/edit/qY7MbR

Answer 3

Если вы используете бутстрап, с точки зрения дизайна, вы также можете использовать значок fa-remove.

Кроме того, с точки зрения удобства использования вы можете выровнять значок удаления слева.

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> 

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

В коде директивы:

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

Answer 4

Примечание: если используется тегирование и мечения-метка = "ложных" в этом случае позволяют чистой функциональности не работают.

Пользовательские ясно функциональность

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> 

контроллера Код действия

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