Select dependent on angle

Question

Select dependent on angle

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

Good afternoon.

I'm learning angular and I do not know how to work with the select. I want to have two selections and that the second depend on the first.

For example:

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

In case of selecting Fruits in the 1 select should appear in the select 2 the fruits, otherwise the names of the animals appear but not the two types fruits and animals at the same time therefore I say that the 2 select depends on the 1 .

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

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

When you click on the option1 and show the two options Animals and Fruits and select Fruits in the 2 option you should see the information related to fruits, Banana, Apple.

I also need to know how I can put a value that appears by default in option

Thank you very much for your answers

angularjs

asked by Reynier Téllez 22.09.2016 в 15:36

source

4 answers

Is it possible to import a sql script and split the queries? Learn value returned by an onsubmit form in HTML5 CanvasInput

score 2 · Answer 1

You should only have 2 arrangements in your controller:

types: contains the options (Fruits, Animals, etc.).
things: contains the options according to the selected type.

To have a default value, in this case I have set Select as the default value, just put the attribute% co_of% empty.

Example

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>

score 0 · Answer 2

You have several alternatives to perform the behavior you indicate. Between the two that more relevant can be, they are the following:

Use the ng-change directive to assign an action at the time the value of the first select changes.
Use $ watch to see when the value of the first select changes.

Also, it will depend on how you are showing the options of the selects you have. You can also use two alternatives:

Using the ng-options directive
Using ng-repeat to generate options

For example, with the ng-change directive, it could be like this (assuming that the first select has ng-model="select1" and the second select has 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>

And in the controller:

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

You can see this example in an article that I found on the following page:

link

score 0 · Answer 3

The code you need is very simple, just use ng-if to show / hide the dependent select . You do not need to write any code for this.

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>

You can use ng-show instead of ng-if but be careful if in your logic you have some validation like required or ng-required , the select will be hidden and you will not be able to submit to the form.

score 0 · Answer 4

You can use the ng-switch and do not need to use a list in the controller as they indicate more than $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>

I hope you serve, greetings ...