ui-select鼠标选择在标记时不起作用-label=false

Question

在Angular ui-select中使用tagging-label='false'时，无法通过鼠标单击进行选择。我测试了angular-ui-select - 0.13.2、0.14.1和最新版本0.14.9。我的要求是我可以通过键盘输入任何值，就像文本框一样，我可以用鼠标从下拉菜单中选择任何现有的选项。

 <ui-select tagging="newTag" tagging-label="false" ng-model="selectedCountry" theme="bootstrap" style="width: 300px;" title="Choose a country">
      <ui-select-match placeholder="Select country...">{{$select.selected}}</ui-select-match>
      <ui-select-choices repeat="country in countries | filter:$select.search">
      {{country}}
      </ui-select-choices>
 </ui-select>

这里是Plnkr - http://plnkr.co/edit/UGbBq1fSMZK12tpa2wK5?p=preview

Answer 1

我认为问题出在tagging="newTag"属性中，该属性需要定义一个$scope.newtag()函数(但您的控制器中缺少该函数)。

它可以像下面这样修改代码：

  <ui-select ng-model="model.selectedCountry" tagging-label="false" theme="bootstrap" ng-disabled="disabled" style="width: 300px;" title="Choose a country">
    <ui-select-match placeholder="Select country...">{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="country in countries | filter:$select.search">
      {{country}}
    </ui-select-choices>
  </ui-select>

另一件事是，由于scope inheritance in Angular/JS，有必要将selectedCountry包装在对象中(所有ui选择示例都使用这种方式)：

 $scope.model = {selectedCountry: ''};

plnkr更新：

http://plnkr.co/edit/wqyTifycfTmnnsn22Be9?p=preview