1

Buenas tardes.

Estoy aprendiendo angular y no se bien como trabajar con los select. Quiero tener dos select y que el segundo dependa del primero.

Por ejemplo:

select 1
<select> 
<option>Animales</option>
<option> Frutas</option>
</select>

En caso de seleccionar Frutas en el 1 select debe aparecer en el select 2 las frutas, caso contrario aparece los nombres de los animales pero no los dos tipos frutas y animales al mismo tiempo por eso digo que el 2 select depende del 1.

select 2
<select> 
<option>Perro</option>
<option>Gato</option>
</select>

<select> 
<option>Platano</option>
<option>Manzana</option>
</select>

Cuando haga click en el option1 y se muestre las dos opciones Animales y Frutas y seleccionar Frutas en el 2 option deberia aparecer la información relacionada con frutas Platano, Manzana.

También necesito saber como puedo poner un valor que aparezca por defecto en el option

Muchas gracias por vuestras respuestas

1
  • como puedo hacerlo para angular 6?
    – Franzc
    el 2 ago. 2018 a las 5:17

4 respuestas 4

3

Solo debes tener en tu controlador 2 arreglos:

  • tipos: contiene las opciones (Frutas, Animales, etc.).
  • things: contiene las opciones de acuerdo al tipo seleccionado.

Para tener un valor por defecto, en este caso le he puesto Seleccionar como valor por defecto, tan solo debes ponerle el atributo value vacio.

Ejemplo

angular.module('app', [])
  .controller('selectController', ['$scope', ($scope) => {
    $scope.type = '';
    $scope.thing = '';
    $scope.types = ['Frutas', 'Animales'];
    $scope.things = [];
    
    $scope.putThings = function() {
      if($scope.type === 'Frutas') {
        $scope.things = ['Plátano', 'Manzana', 'Pera'];
      } else {
        $scope.things = ['Perro', 'Gato', 'Conejo'];
      }
    }
  }]);
<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ejemplo de selects con AngulaJS</title>
</head>
<body ng-controller="selectController">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
   <!-- tipos -->
   <select ng-model="type" ng-change="putThings()">
     <option value="" selected>Seleccionar</option>
     <option ng-repeat="t in types">{{t}}</option>
   </select>
   <!-- depende del select -->
   <select ng-model="thing">
     <option value="" selected>Seleccionar</option>
     <option ng-repeat="t in things">{{t}}</option>
   </select>
</body>
</html>

0

Tienes varias alternativas para realizar el comportamiento que indicas. Entre las dos que más relevantes pueden ser, están las siguientes:

  • Utilizar la directiva ng-change para asignar una acción al momento de que cambia el valor del primer select.
  • Utilizar $watch para ver cuándo cambia el valor del primer select.

Además, va a depender de cómo estás mostrando las opciones de los selects que tienes. Puedes utilizar también dos alternativas:

  • Uso de la directiva ng-options
  • Uso de ng-repeat para generar options

Por ejemplo, con la directiva ng-change, podría ser así (asumiendo que el primer select tiene como ng-model="select1" y el segundo select tiene como ng-model="select2").

<select ... ng-model="select1" ng-change="selectChanged()" ng-options="opt.value as opt.label for opt in options"></select>
<select ... ng-model="select2" ng-options="dep.value as dep.label for dep in deps"></select>

Y en el controlador:

...
$scope.options = [{value:0,label:'Animales'}, {value:1,label:'Frutas'}];
$scope.deps = [];
var animals = [{value:0,label:'Perro',}, {value:1,label:'Gato'}];
var fruits = [{value:0,label:'Platano'}, {value:1,label:'Manzana'}];
var arrays = [animals, fruits];
...
$scope.selectChanged = function() {
  $scope.deps = arrays[$scope.select1];
}

Puedes ver este ejemplo en un artículo que he encontrado en la siguiente página:

http://blog.aulaformativa.com/consultorio-desarrollo-web/

0

El código que necesitas es muy simple, sólo usa ng-if para mostrar/ocultar los select dependientes. No necesitas escribir nada de código para esto.

angular.module('app', [])
  .controller('SelectCtrl', function($scope) {
    $scope.tipos = ['Animales', 'Frutas'];

    $scope.animales = ['Perro', 'Gato'];

    $scope.frutas = ['Platano', 'Manzana'];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="SelectCtrl">
  <p>
    <select ng-model="tipo" ng-options="tipo for tipo in  tipos">
    </select>
  </p>
  <p ng-if="tipo === 'Animales'">
    <select ng-model="seleccion" ng-options="animal for animal in animales">
    </select>
  </p>

  <p ng-if="tipo === 'Frutas'">
    <select ng-model="seleccion" ng-options="fruta for fruta in frutas">
    </select>
  </p>
</div>

Puedes usar ng-show en lugar de ng-if pero ten cuidado si en tu lógica tienes alguna validación como required o ng-required, el select estará oculto y no podrás hacerle submit al formulario.

0

Puedes utilizar el ng-switch y no requiere usar una lista en el controlador como indican mas que un $scope.opcion.

      select 1
      <select ng-model="opcion"> 
         <option value="Animales">Animales</option>
         <option value="Frutas"> Frutas</option>
      </select> 

      <div ng-switch="opcion">
         <div ng-switch-when="Animales">
            <select> 
              <option>Perro</option>
              <option>Gato</option>
            </select>
         </div>
         <div ng-switch-when="Frutas">
            <select> 
               <option>Platano</option>
               <option>Manzana</option>
            </select>
         </div>
      </div>

Espero te sirva, saludos...

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.