Question

我没有得到任何解决方案，将组合框作为选择和输入。这意味着如果用户选择不在每个填充列表中，那么使用应该能够输入他的选择值。用户选择（选择或输入）应该在angularjs中设置和检索为ng-model。

谢谢

Answer 1

ui-select看起来不像我们习惯的正确选择。所以这就是我最终使用Twitter Bootstrap 3的帮助：

http://jsfiddle.net/ruslans_uralovs/2brhd/1/

<div ng-app >
    <div class="row" ng-controller="ExampleController">
        <div class="col-xs-8 col-xs-offset-2">

            <form role="form">
                <div class="input-group">
                    <input type="text" class="form-control" ng-model="myColor.name">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                        <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                            <li ng-repeat="color in colors" class="input-lg"><a href="#" ng-click="changeColor(color)">{{color.name}}</a></li>
                        </ul>
                    </div>
                </div>
        </div>
    </div>
</div>

来自爱尔兰的问候！

Answer 2

ui-select2 library允许您通过指令使用select2。这提供了一些很棒的UI元素，可以满足您的要求。

一般情况下，我还建议Angular Modules网站查找各种有用的Angular库。

Answer 3

使用html5你可以这样做：

    <input type=text list=browsers >
    <datalist id=browsers >
       <option> Google
       <option> IE9
    </datalist>

从这里得到它： http://www.scriptol.com/html5/combobox.php

Answer 4

我也在寻找相同的东西并没有找到一个好的解决方案，所以我最终创建了angular-combo-box directive，它可以让你做你想要的。这是一个例子。

angular.module('ngComboBoxExample', ['ngComboBox'])
  .controller('myController', function($scope) {
    $scope.options = [
      'Blue',
      'Red',
      'Pink',
      'Purple',
      'Green'
    ];
    $scope.color = '';
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://bradleytrager.github.io/angular-combo-box/bower_components/angular-combo-box/dist/angular-combo-box.min.js"></script>

<div ng-app="ngComboBoxExample">
  <div ng-controller="myController">
    <combo-box options="options" combo-model="color" label="--Select a Color--" other-label="A color not on the list...">
    </combo-box>
    <div>Selected Color: <span ng-bind="color"></span>
    </div>
  </div>
</div>

希望它有所帮助！

使用bootstrap / angularjs的可编辑ComboBox

4 个答案: