风格：

Question

更新1：开发了第一个示例代码，以便为正确实施奠定基础更新2：开发了一个工作模型。见答案。

我找到了这个库：

https://libraries.io/bower/editable-dropdown-angularjs

允许使用HTML5 datalist功能添加可编辑的下拉列表。

它工作正常，但是，唯一需要的功能是只有当所选值为＆＃34;其他＆＃34;时才能使该字段可编辑。

根据repository

中的演示，查看plunkr.co中的工作样本

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

有关详细信息，请参阅下面的示例代码。

感谢您的建议，只有当所选值为＆＃34;其他＆＃34;。

时，才能使下拉字段可编辑

HTML5：

<div ng-app="myApp">
    <div ng-controller="demo" style="width:300px;position:fixed;top:20px;left:20px">    
        <p>You selected {{selected}}</p>
        <editable-dropdown options='list' ng-model='selected'></editable-dropdown>
    </div>
</div>

JavaScript的：

angular.module('myApp', ['editableDropdown'])
.controller('demo', function($scope){
    $scope.list = ['one', 'two', 'other']
    $scope.selected;
});

我能够使用jsfiddle（based in this answer）开发此示例代码：

http://jsfiddle.net/tarekahf/t392djx1/

如果＆＃34;其他＆＃34;这将允许下拉列表可编辑。被选中。现在，我正在将此模式转换为Angular方式。如果您有任何建议，请告诉我。

Answer 1

好像你没有过多地关注你的问题，正如我评论的那样，你（仍然）更好地编写自己的实现，而不是试图强迫function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function reply_click(clicked_id) { alert(clicked_id); return clicked_id; } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); if(ev.target.getAttribute("data-allowed")==data) ev.target.appendChild(document.getElementById(data)); }满足你的需求。 / p>

无论如何，我冒昧地为你写了我自己的editable-dropdown-angular指令。

指令需要editable-select数组来选择和可选options字符串，这是用户可编辑选择的默认值。 other可以自由修改。

希望你觉得它很有用。

应用HTML模板

options

App JavaScript

other

指令HTML模板（editable-select-tpl.html）

<body ng-controller="Ctrl as vm">
  <!-- directive -->
  <editable-select 
    ng-model="vm.selected" 
    options="vm.options" 
    other="Other"> <!-- write "other" here or assign var in controller -->
  </editable-select>

  <hr>
  <span>User selected: {{ vm.selected }}</span>
</body>

<强> CSS

angular
.module('app', [])    
.controller('Ctrl', function() {
  var vm = this;
  vm.options = ['One', 'Two']; // selection options
})    
.directive('editableSelect', function() {
  return {
    restrict: 'E',
    require: '^ngModel',
    scope: {
      ngModel: '=',
      options: '=',
      other: '@'
    },
    replace: true,
    templateUrl: 'editable-select-tpl.html', 
    link: function(scope, element) {
      scope.isDisabled = true;

      // option clicked handler    
      scope.click = function(option) {
        scope.ngModel = option;
        scope.isDisabled = !scope.other || scope.other !== option;
        if (!scope.isDisabled) {
          element[0].querySelector('.editable-select').focus();
        }
      };

      // option typed handler          
      var unwatch = scope.$watch('ngModel', function(val) {
        if (!scope.isDisabled) {
          scope.other = scope.ngModel;
        }
      });

      // release watcher          
      scope.$on('$destroy', unwatch);
    }
  };
});

此处相关的plunker https://plnkr.co/edit/7bVgDW

Answer 2

这是我的解决方案。这是基于另一篇文章，但我不记得来源。感谢所有帮助过的人。

只需在n/6元素上添加属性editable-dropdown即可。属性的值必须是select元素的ID。

风格：

input

HTML：

.stop-wrap {
    display: inline-block;
}

.select-editable {
    position:relative;
    background-color:white;
    border:solid grey 1px;
    width:120px;
    height:25px;
    vertical-align: middle;
    margin-bottom: 5px;
}
.select-editable select {
    position:absolute;
    top:0px;
    left:0px;
    border:none;
    width:118px;
    margin:0;
}
.select-editable input {
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    padding:1px;
    border:none;
}
.select-editable select:focus, .select-editable input:focus {
    outline:none;
}

的JavaScript：

<div class="select-editable stop-wrap">
    <select editable-dropdown="input_elem" id="input_elem_sel" name="input_elem_sel">
          <option value=""></option>
          <option value="Option 1">Option 1</option>
          <option value="Option 2">Option 2</option>
          <option value="Option 3">Option 3</option>
          <option value="Option 4">Option 4</option>
          <option value="Other">Other ...</option>
    </select>
    <input id="input_elem" name="input_elem" ng-model="input_elem" force-model-update>
</div>

角度可编辑下拉菜单 - 根据所选值进行编辑

2 个答案:

风格：

HTML：

的JavaScript：