How to make a 3 loop in the hierarchy with angularjs?

Question

How to make a 3 loop in the hierarchy with angularjs?

Navigation

#1 by (0 votes)

1

What I want is that when I select a department, the municipalities appear to me, and when I select municipalities, the zones appear in that municipality, try this, everything works except the last loop that is the zone:

                  <div class="label_form">Departamento</div>

                  <select id="municipio" name="municipio" ng-model="selected.departamento" data-name="municipio" class="input_form input_form_fecla w-select">
                    <option value="{{lugar.departamento}}" ng-model="selected" ng-repeat="lugar in lugares" ng-bind="lugar.departamento">Municipio</option>
                  </select>


                </div>
                <div class="columna_ubicacion medio">
                  <div class="label_form">Municipio</div>

                  <select id="departamento" name="departamento"  ng-model = "selected.Municipio"  data-name="departamento" class="input_form input_form_fecla w-select">
                    <option value="{{lugar.municipio}}" value2="{{lugar.coordenada}}" ng-repeat="lugar in lugares[selected.departamento].informacion" ng-bind="lugar.municipio"></option>
                  </select>
{{selected.Municipio}}

  <select id="departamento" name="departamento"  ng-model = "select.zona"  data-name="departamento" class="input_form input_form_fecla w-select">
                    <option value="{{lugar.zona}}" value2="{{lugar.coordenada}}" ng-repeat="lugares in lugares [selected.departamento].informacion[selected.Municipio]" ng-bind="lugar">

                    </option>


                  </select>


  var lugares={
      "Alta Verapaz" : {
        "departamento": "Alta Verapaz",
        'informacion' : [
        {'coordenada': "15.5942883,-90.1494988",
        'municipio': "Santa Catarina La Tinta",
        'zonas': [
          "Zona 1"
        ]

      }
]
      }

    };

angularjs

asked by Angel 17.10.2018 в 00:30

source

1 answer

Angular Router projects and different servers Error installing flask-mysql

score 0 · Answer 1

What you have to do is the following ng-repeat in this way

ng-repeat="lugar in lugares[selected.departamento].informacion[0].zonas" <br>

var app = angular.module('App', ['ngMaterial', 'ngMessages']);
    app.controller('AppCtrl', function($scope, $timeout) {

        $scope.lugares={
            "Alta Verapaz" : {
                "departamento": "Alta Verapaz",
                'informacion' : [
                    {
                        'coordenada': "15.5942883,-90.1494988",
                        'municipio': "Santa Catarina La Tinta",
                        'zonas': [
                            "Zona 1"
                        ]
                    }
                ]
            }
        };
    });

<!DOCTYPE html>
<html ng-app="App">

<head>
	<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-aria.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-messages.js"></script>
	<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>

	<script src="script.js"></script>
</head>

<body ng-controller="AppCtrl">
	<div>
		<div class="label_form">Departamento</div>

		<select id="municipio" name="municipio" ng-model="selected.departamento" data-name="municipio" class="input_form input_form_fecla w-select">
			<option value="{{lugar.departamento}}" ng-model="selected" ng-repeat="lugar in lugares" ng-bind="lugar.departamento"></option>
		</select>


	</div>
	<div class="columna_ubicacion medio">
		<div class="label_form">Municipio</div>

		<select id="departamento" name="departamento"  ng-model = "selected.Municipio"  data-name="departamento" class="input_form input_form_fecla w-select">
			<option value="{{lugar.municipio}}" value2="{{lugar.coordenada}}" ng-repeat="lugar in lugares[selected.departamento].informacion" ng-bind="lugar.municipio"></option>
		</select>
		
		<select id="departamento" name="departamento"  ng-model="selected.zona"  data-name="departamento" class="input_form input_form_fecla w-select">
			<option value="{{lugar.zona}}" value2="{{lugar.coordenada}}" ng-repeat="lugar in lugares[selected.departamento].informacion[0].zonas" ng-bind="lugar">

			</option>


		</select>
	</div>
</body>

</html>