No estoy recibiendo ninguna solución para tener control combobox como seleccionar así como de entrada. Esto significa que si la selección del usuario en que no existe en cada poblado de la lista , a continuación, utilizar debe ser capaz de entrar en su valor de la opción.
los usuarios de elección (seleccionado o introducido) se debe establecer y recuperables como ng-model en angularjs.

gracias

  • Creo que quiere una directiva. Crear un violinista y uno puede agregar una directiva para usted
InformationsquelleAutor sudhirk | 2014-02-07

4 Comentarios

  1. 14

    La interfaz de usuario de la biblioteca select2 permite utilizar select2 a través de una directiva. Que proporciona algunos de los grandes elementos de interfaz de usuario que hacer lo que estás pidiendo.

    En general, también recomiendo el Angular Módulos sitio para encontrar varias útil Angular de las bibliotecas.

    • La pregunta es muy clara acerca de ser capaz de entrar en un valor que no está en la Seleccione de la lista. Yo no podía ver cómo Select2 ayudaría con ese requisito.
    • Como un ejemplo, visitar el select2 enlace que he proporcionado y buscar / desplácese hacia abajo para «el Soporte de etiquetas». A partir de la página: «tenga en cuenta que cuando el etiquetado está habilitada, el usuario puede seleccionar desde la pre-etiquetas existentes o crear una nueva etiqueta seleccionando la primera opción, que es lo que el usuario ha tecleado en el cuadro de búsqueda hasta el momento». Que es como yo lo uso, no permite introducir nuevos valores.
    • Gracias, Matt. Francamente, el texto de la página que has citado es tan destrozado que me entendieron bien. Gracias por la claridad!
    • Gracias! BTW, interfaz de usuario-select2 de la biblioteca se ha quedado obsoleta y se reemplaza con interfaz de usuario, seleccione la biblioteca.
  2. 22

    de interfaz de usuario-seleccione realmente no se parecen a una adecuada seleccione todos estamos acostumbrados.
    Así que aquí es lo que acabé haciendo con la ayuda de 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>

    Saludos desde Irlanda!

    • Me gusta este implemento mejor que el de la interfaz de usuario seleccione. Esto permite que cierto tipo en donde la interfaz de usuario, seleccione sólo mirar hacia arriba.
    • Como que demasiado mejor que la interfaz de usuario seleccione. Elegante y fácil.
    • Esta fue la modificación de los datos originales, por lo que he ajustado un poco jsfiddle.net/ueuo4yho
    • si queremos introducir los nuevos datos, el viejo de datos seleccionado en el desplegable se actualiza/perdidos. @liteflier, incluso su soln no funciona..
    • esta es una buena solución.. solo fija la nueva actualización de los datos de lista desplegable de la cuestión aquí jsfiddle.net/3deepak/2brhd/462
    • cuando yo uso la tecla de retroceso y quitar lo que he escrito en el cuadro de la lista desplegable tendrá un punto en blanco. ¿hay una solución para eso?

  3. 4

    Yo también estaba buscando la misma cosa y no encontrar una buena solución, así que acabé creando angular de cuadro combinado de la directiva que te permite hacer lo que usted está buscando. He aquí un ejemplo.

    JS:

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

    HTML:

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

    Espero que ayude!

    • Esto es bueno, pero carece de la función de búsqueda. Y se necesitan dos campos separados.
    • «Ejecutar fragmento de Código» no puede crear cualquier tipo de control de entrada de usuario…

Dejar respuesta

Please enter your comment!
Please enter your name here