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

【问题标题】：How to clear ui-select programmatically?如何以编程方式清除 ui-select？
【发布时间】：2019-10-02 23:15:03
【问题描述】：

我想找到一种方法，通过代码清除 ui-select 的选择。

例如我有以下代码

<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的代码是什么？

【问题讨论】：

标签： angularjs ui-select

【解决方案1】：

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

ng-model="selectedCustomer.selectedCustomerCode"

然后我能够像这样清除它：

selectedCustomer.selectedCustomerCode = ''

如果我有

ng-model="selectedCustomerCode"

然后将其重新分配给：

selectedCustomerCode = ''

不知何故不起作用。

【讨论】：

【解决方案2】：

你应该清除cont.selectedCustomerCode变量：

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

编辑：

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

【讨论】：

这是有道理的，但我已经尝试过了，但没有奏效。奇怪的是，我在我的 html 中放了一个
{{selectedCustomerCode}}
并且它在选择 ui-select 之前或之后什么都没有显示
@vagelis 我进行了编辑。你能试试我的建议并告诉我它是否有效吗？

【解决方案3】：

对于 ui-select-match 有一个选项 allow-clear 可以为您执行此操作，您将在右侧看到 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

【讨论】：

这可能是一个解决方案，但我想通过另一个按钮的代码来清除表单中的所有 html 输入。
然后点击按钮清除 ng-model .like $scope.selectedCustomerCode='' or {} or [] 。不管是什么
我已经尝试了所有这些，但似乎没有任何效果。奇怪的是，我在我的 html 中放了一个
{{selectedCustomerCode}}
并且它在选择 ui-select 之前或之后什么都没有显示
那么只有一个选择
首先创建一个全局对象，如 :$scope.form={};然后在最后一次单击按钮时定义每个控件的 ng-model，例如 form.control1 或控件 2，将其传递给按钮单击，例如 ng-click="click(form)" 。并在您的控制器中使其为空。它肯定对你有用

【解决方案4】：

我今天使用的另一种可能的解决方案是通过在 ui-select-choices 中重复的列表中添加一个 clear 元素来创建一个空状态

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

【讨论】：