Кто-нибудь знает, как очистить выбранное значение окна выбора ui в angular?
Мне нужна функциональность select2, где у вас есть маленький x в selectbox. Не похоже, что у него есть метод clear-clear, который select2 получил.
Кто-нибудь знает, как очистить выбранное значение окна выбора ui в angular?
Мне нужна функциональность select2, где у вас есть маленький x в selectbox. Не похоже, что у него есть метод clear-clear, который select2 получил.
Существует опция allow-clear
для ui-select-match, которая делает вещь для вас, у вас будет 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
При отображении выделения вы можете добавить небольшую кнопку 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 от пузырьков и запускаете открытое событие. И вы очищаете поле, перезаписывая выбранную модель.
$scope.clear = function($event) {
$event.stopPropagation();
$scope.country.selected = undefined;
};
Здесь plnkr. http://plnkr.co/edit/qY7MbR
Если вы используете бутстрап, с точки зрения дизайна, вы также можете использовать значок 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;
};
Примечание: если мы использовали тегирование и tagging-label = "false", в этом случае функция allow-clear не работает.
Пользовательская четкая функциональность
Код 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();
}