Question

我尝试制作一个下拉md-select输入框，其中包含一些预先确定的选项，但我也希望用户能够输入自己的选项。

我在Plunkr关闭此处，但我无法让它正常工作。我有两个问题：

当用户选择＆＃34;其他...＆＃34;选项，下拉列表在有时间输入任何内容之前就会崩溃。
即使我在下拉菜单关闭之前潜入某个条目，我也无法继续保持并显示我的价值。

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; 
  };

});

有什么建议吗？

Answer 1

在input扩展后，尝试solution已经关注md-select的位置，这样用户就可以选择普通md-option，只需点击它，就像往常一样，或者立即开始在input中键入 #other 选项，然后他会点击它或在外面，在这两种情况下，值将被分配到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);
  }

});

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

1 个答案: