Select dependiente en angular

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
задан 26.09.2016, 18:11
3 ответа

Только у тебя должно быть в твоем драйвере 2 договоренности:

  • типов: он содержит выборы (Фрукты, Животные, и т.д.).
  • things: он содержит выборы согласно отборному типу.

, Чтобы иметь стандартную настройку, в этот случай я поместил ему Выбирать как стандартная настройка, только ты должен делать ему признак value пустым.

Пример

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>
2
ответ дан 24.11.2019, 13:19

У тебя есть несколько альтернатив, чтобы реализовывать поведение, которое ты показываешь. Между двумя часами, которые более значимые могут быть, - следующие:

  • Использовать директивный орган ng-change, чтобы распределять действие, в момент которого он меняет стоимость первого select.
  • Использовать $watch, чтобы видеть, когда меняется стоимость первого select.

Кроме того, будешь зависеть как дела показывая выборы selects, которые у тебя есть. Ты можешь использовать также две альтернативы:

  • Использование директивного органа ng-options
  • Использование ng-repeat, чтобы производить options

Например, с директивным органом ng-change, это мочь быть так (понимая, что первый select имеет, как ng-model = "select1" и у второго select есть как 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>

И в драйвере:

...
$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];
}

Ты можешь видеть этот пример в статье, которую я нашел на следующей странице:

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

0
ответ дан 24.11.2019, 13:19

Код, в котором ты нуждаешься, - очень простой, только использует ng-if чтобы показывать / скрывать select продавцы. Ты не нуждаешься в том, чтобы не написать ничего из кода для этого.

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>

Ты можешь использовать ng-show вместо ng-if но будь осторожен, если в твоей логике у тебя есть какое-то утверждение как required или ng-required, select будет скрытым и ты не сможешь делать ему submit в формуляр.

0
ответ дан 24.11.2019, 13:19

Ты можешь использовать ng-switch и он не требует использовать список в драйвере, как они показывают больше, чем один $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>

Я надеюсь, что он подает тебя, привет...

0
ответ дан 03.12.2019, 20:14