Question

我需要在单击清除按钮时清除角度ui-slect中的选定选项，我看到的选项主要是使用允许清除（x-icon）。有人可以点击我的清除按钮告诉我如何做同样的事情。以下是我的代码：

 <form name = "Studform" class="form-horizontal" ng-submit="search(stud.search.id,stud.search.country)">
      <div class="row">
        <div class="col-xs-2 col-md-2"></div>
        <div class="col-xs-4 col-md-4 bottom-buffer">
          <div class="row form-group">
            <label class="control-label col-xs-2">Country</label>
            <div class="col-xs-6 ">
              <ui-select id= "country" ng-model="ctry" name= "country"  theme="bootstrap">
                <ui-select-match >{{text || $select.selected.id}}</ui-select-match>
                <ui-select-choices repeat="countryL in countryLookup | filter: $select.search">
                  <div ng-bind-html="countryL.id | highlight: $select.search"></div>
                  <small ng-bind-html="countryL.name | highlight: $select.search"></small>
                </ui-select-choices>
              </ui-select>
            </div>
          </div>
        </div>
        <div class ="col-xs-2 col-md-2"></div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-md-12" align="right">
          <button type="button" ng-click="clear()" class="btn btn-default " >Clear</button>
          <button type="button" ng-disabled="form.$invalid" ng-click="search(ctryval)" >Search</button>
        </div>
      </div>
    </form>



  $scope.clear = function () {
          $scope.ctry = undefined;
        //did not work 
        };

Answer 1

我认为这可行：

  $scope.clear = function () {
     delete $scope.ctry;
  };

尝试这个，因为首先不起作用：

HTML

    <ui-select id= "country.selected" ng-model="ctry" name= "country" theme="bootstrap">
    ...
    <button class="btn btn-default" ng-click="clear($event)">X</button>

JS

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

Answer 2

ui-select现在提供清除按钮/功能。

您需要做的就是设置allow-clear属性。

<ui-select-match allow-clear>
...
</ui-select-match>

如何清除角度ui中的选定选项选择按钮单击

2 个答案: