AngularJS Angular ui-select多选的clean ng-model value

在本文中，我们将介绍如何在AngularJS的Angular ui-select中清除多选的ng-model值。

AngularJS和Angular ui-select简介

AngularJS是一个由Google开发的用于构建动态Web应用程序的JavaScript框架。它具有双向数据绑定、依赖注入、模块化开发等特点，可以大大简化开发过程。

Angular UI-Select是一个基于AngularJS的强大的下拉选择框组件。它支持单选和多选模式，并且具有非常丰富的功能和灵活性。

Angular ui-select多选模式

在Angular ui-select中使用多选模式很简单，只需要在select标签上添加multiple属性即可：

<ui-select multiple ng-model="selectedItems">
  <ui-select-match>{{ $item.label}}</ui-select-match> <ui-select-choices repeat="item in items track by$ index">
    <span ng-bind="item.label"></span>
  </ui-select-choices>
</ui-select>

上述代码中，ng-model绑定了一个$scope上的变量selectedItems，用于存储用户选择的项。ui-select-match用于定义选中项显示的模板，ui-select-choices用于定义下拉选项的模板。

清除多选的ng-model值

在某些情况下，我们可能需要在用户做出选择之后清除多选的ng-model值。这种情况可能发生在用户需要重新选择而不是追加选择的时候，或者用户想把选择重置为初始状态时。

为了清除多选的ng-model值，我们可以使用ui-select提供的API方法$select.selected，结合splice函数来实现清除操作：

$scope.clearSelection = function() {
  $scope.selectedItems.splice(0, $scope.selectedItems.length);
};

上述代码中，我们定义了一个名为clearSelection的函数，当触发清除操作时调用该函数。在函数体内，我们通过调用splice函数将$scope.selectedItems数组清空。

在HTML模板中，可以通过添加一个清除按钮来绑定清除操作：

<ui-select multiple ng-model="selectedItems">
  <ui-select-match>{{ $item.label}}</ui-select-match> <ui-select-choices repeat="item in items track by$ index">
    <span ng-bind="item.label"></span>
  </ui-select-choices>
</ui-select>
<button ng-click="clearSelection()">清除选择</button>

这样，当用户点击清除按钮时，clearSelection函数将被调用，从而清空selectedItems数组。