0

Tengo una lista desplegable declarada de la siguiente forma, tiene dentro 2 grupos, Perros y Gatos, ambas listas se muestran en el mismo desplegable.

Y sería posible añadir el input donde escribir para filtrar el desplegable, dentro del desplegable en la primera opción?

<label>Perros/Gatos (*)</label>
                    <div class="customClass">
                        <select ng-model="mascotas.type" 
                                ui-select2="ui-select2" 
                                required>
                               <optgroup label="Perros">
                                <option ng-repeat="p in perros" value="{{p.name}}">{{p.label}}</option>
                            </optgroup>
                            <optgroup label="Gatos">
                                <option ng-repeat="g in gatos" value="{{g.name}}">{{g.label}}</option>
                            </optgroup>                           
                        </select>
                    </div>

Es posible, poder filtrar los String del desplegable de según vaya escribiendo?

1 respuesta 1

0

Para ello tendrías que utilizar el pipe de filter sobre el np-repeat utilizando un input tipo text como texto de filtro.

Ejemplo rápido:

<input ng-model="texto-filtro"/>

<label>Perros/Gatos (*)</label>
<div class="customClass">
 <select ng-model="mascotas.type" ui-select2="ui-select2" required>
  <optgroup label="Perros">
  <option ng-repeat="p in perros | filter:texto-filtro" value="{{p.name}}"> 
  {{p.label}}</option>
 </optgroup>
 <optgroup label="Gatos">
  <option ng-repeat="g in gatos | filter:texto-filtro" value="{{g.name}}"> 
  {{g.label}}</option>
 </optgroup>                           
</select>
</div>
2
  • Gracias te comento en cuanto lo pruebe
    – nazonekio
    Commented el 4 oct. 2021 a las 15:47
  • pero tengo 2 ng repeat 1 por optgroup
    – nazonekio
    Commented el 4 oct. 2021 a las 20:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.