以uiselect的angular度清除选定的选项

任何人都知道如何清除angular度select框的选定值？

我想要select2的function，在select框中有一个小的x。 看起来不像是select2得到的allow-clear方法。

Answer 1

有一个选项allow-clearselect匹配为你做的事情，你会有右边的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

显示select时，可以添加一个小Xbutton。

 <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

如果您使用bootstrap，从devise的angular度来看，您也可以使用fa-remove图标。

此外，从可用性的angular度来看，您可能希望将删除图标与左侧alignment。

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

注意：如果我们使用tagging和tagging-label =“false”，那么允许清除function不起作用。

自定义清除function

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