angularjs - 清除 ui-select angular 中的选定选项

Question

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

我想要 select2 的功能，其中您在选择框中有一个小 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

这目前不适用于使用引导程序或选择主题。

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

如果您使用引导程序，从设计角度来看，您还可以使用 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

注意：如果我们使用 tagging 和 tagging-label="false" 在这种情况下允许清除功能不起作用。

自定义清除功能

HTML 代码

<ui-select-match placeholder=”Enter table…”&gt;
 <span>{{$select.selected.description || $select.search}}</span>
 <a class=”btn btn-xs btn-link pull-right” ng-click=”clear($event, $select)”&gt;<i class=”glyphicon glyphicon-remove”&gt;</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();
}