AngularJS 下拉选择具有预定或自定义输入选项的输入答案

【问题标题】：AngularJS dropdown select input with predetermined or custom input optionsAngularJS 下拉选择具有预定或自定义输入选项的输入
【发布时间】：2017-11-15 15:41:54
【问题描述】：

我正在尝试创建一个下拉md-select 输入框，其中填充了一些预先确定的选项，但我也希望用户能够输入他们自己的选项。

我在这个Plunkr 附近，但我不能让它正常工作。我有两个问题：

当用户选择“其他...”选项时，下拉菜单会在他们有时间输入任何内容之前折叠。
即使我在下拉菜单关闭之前潜入一个条目，我也无法让我的价值持续存在并显示出来。

HTML：

<div layout="row">
    <md-select ng-model="ctrl.userCountry">
      <md-option>
        <em>None</em>
      </md-option>
      <md-option value="india">india</md-option>
      <md-option value="china">bangladesh</md-option>
      <md-option ng-blur="ctrl.customEntry({{customText}})">
        <input placeholder="other..." ng-model="customText" type="text">
      </md-option>
      </md-select>
  </div>

js文件：

var app = angular.module('app', ["ngMaterial"]);
app.controller('AppCtrl', function($scope) {

  this.userCountry = 'india';

  this.customEntry = function(input) {
   userCountry = input; 
  };

});

有什么建议吗？

【问题讨论】：

标签： angularjs drop-down-menu

【解决方案1】：

试试这个solution，其中input 已经聚焦，当md-select 展开时，用户可以选择纯md-option，只需单击它，就像往常一样，或者立即开始输入 #other 选项到input，然后他会点击它或在外面，在这两种情况下，值都将分配给userCountry：

HTML：

<body ng-controller="AppCtrl as ctrl">
  <div layout="row">
    <md-select ng-model="ctrl.userCountry" ng-click='ctrl.focus()'>
      <md-option>
        <em>None</em>
      </md-option>
      <md-option value="india">india</md-option>
      <md-option value="china">bangladesh</md-option>
      <md-option ng-click='ctrl.optionClick(temp)'>
        <input id='other' placeholder="other..." type="text" ng-model='temp' ng-change='ctrl.customEntry(temp)'>
      </md-option>
      </md-select>
  </div>

  <div layout="row">
    return value: {{ctrl.userCountry}}
  </div>
</body>

Javascript：

var app = angular.module('app', ["ngMaterial"]);
app.controller('AppCtrl', function($scope, $timeout) {
  self = this;
  this.userCountry = 'india';

  this.customEntry = function(input) {
   this.userCountry = input; 
  };

  this.optionClick = function(input) {
    $timeout(function(){
      self.userCountry = input; 
    }, 100);
  };

  this.focus = function(){
    setTimeout(function(){
      document.getElementById("other").focus();
    }, 100);
  }

});

【讨论】：