在ui-select angular中清除所选选项

Question

任何人都知道如何清除角度的ui选择框的选定值？

我想要select2的功能,你在selectbox中有一个小x.看起来不像是select2得到的allow-clear方法.

Answer 1

如果您使用的是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

目前使用bootstrap或selectize主题不起作用.

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>

然后停止点击事件冒泡并触发打开事件.您可以通过覆盖所选模型来清除该字段.

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

这是plnkr.http://plnkr.co/edit/qY7MbR

Answer 3

如果您使用bootstrap,从设计角度来看,您还可以使用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;
};