如何以编程方式清除 ui-select？

Question

我想找到一种方法来通过代码清除 ui-select 的 selection。

例如我有以下代码

<ui-select ng-model="selectedCustomerCode" ng-if="CustomerIds.length>1" on-select="CustomerCodeFiltersOnSelectCallback($item, $model)" theme="bootstrap">
  <ui-select-match class="ui-select-match" allow-clear="true" placeholder="Επιλογή κωδικού πελάτη...">{{$select.selected.CCode}}</ui-select-match>
  <ui-select-choices class="ui-select-choices" repeat="customer in CustomerIds | propsFilter: {CCode: $select.search}">
    <div ng-bind-html="customer.CCode | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

我想点击清除按钮并清除一些输入，包括 ui-select。清除ui-select的代码是什么？

Answer 1

有一个选项 allow-clear for 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 in a list...">
  <span>{{$select.selected.name}}</span>
</ui-select-match>

工作示例http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview

Answer 2

您应该清除 cont.selectedCustomerCode 变量：

<button ng-click="cont.selectedCustomerCode = ''">clear</button>

编辑：

您应该考虑在变量上公开您的属性。这是推荐的方式。

Answer 3

问题已解决。我不知道为什么，但是在 ng-model 中只有 selectedCustomerCode 不能正常工作。我将 selectedCustomerCode 指定为一个对象：

ng-model="selectedCustomer.selectedCustomerCode"

然后我就可以这样清除它了：

selectedCustomer.selectedCustomerCode = ''

如果我有

ng-model="selectedCustomerCode"

然后将其重新分配给：

selectedCustomerCode = ''

不知何故不起作用。

Answer 4

我今天使用的另一种可能的解决方案是通过向 ui-select-选项

中重复的列表添加一个清除元素来创建空状态

vm.CustomerIds.unshift({"CCode":"Select..."});

如何以编程方式清除 ui-select？

How to clear ui-select programmatically?

angularjs

ui-select