Question

我正在使用ngChosen填充菜单。在我的控制流程中的某个时刻，我想取消选择所选元素。假设select有ngModel的“foo”。

 <select chosen="" 
     data-ng-model="foo" 
     data-ng-options="thing.property for thing in things" 
     class="chosen-select input-md"></select>

我试过了

$scope.foo = "";

和

$scope.operation = null;

但两者都没有奏效。如何取消选择ngChosen中的当前选择？

Answer 1

清除模型值（就像你已经存在的那样），然后在元素上触发chosen:updated。

$scope.foo = "";
$('.chosen-select').trigger('chosen:updated');

这里需要注意的是，在您触发事件之前，Angular首先需要对foo应用所做的更改。

不正确的方法是调用$scope.apply()强制Angular“继续将这些更改应用到DOM”。

app.controller('MyController', [function() {
  $scope.actionToTake = function(){
    $scope.foo = "";
    $scope.apply();
    $('.chosen-select').trigger('chosen:updated');
  }
}

处理此问题的正确方法是使用$timeout服务。这将确保在触发事件之前成功调用并完成$scope.apply()。

app.controller('MyController', ['$timeout', function($timeout) {
  $scope.actionToTake = function(){
    $scope.foo = "";
    $timeout(function(){
      $('.chosen-select').trigger('chosen:updated');
    });
  }
}

Answer 2

您可以使用：allow-single-deselect="true"

<select chosen="" 
     data-ng-model="foo" 
     data-ng-options="thing.property for thing in things" 
     allow-single-deselect="true"
     class="chosen-select input-md"></select>

这将启用控件中的一个选项以删除选择

you can see here how the control looks like

通过这样做，当移除选项被激活时，模型也会被清除。

ngChosen：如何清除选择？

2 个答案: