As popular dropdown 2 based on dropdown 1 with angular

Question

As popular dropdown 2 based on dropdown 1 with angular

Navigation

#1 by (0 votes)

2

I want to use two dropdowns in my HTML5 Depending on what I select in dropdown 1, it displays its data in dropdown 2, as in that link . I looked up the documentation for the angled this that came very close, but still did not work. NOTE: Both dropdown values are loaded from api in php, not placed "by hand" as in the above link

HTML5

<form>
    <label>Estabelecimento</label>
    <select class="form-control" name="estabelecimento" ng-model="mesa.idestabelecimento" required="required" ng-change="getUnidade()" ng-options="c as c.nome for c in cia track by c.idestabelecimento">
         <option value="">Selecione estabelecimento</option>
         <option ng-repeat="c in cia" value="{{ c.idestabelecimento }}" required>{{ c.nome }}
    </option>
    </select>
    <label>Unidade</label>
    <select class="form-control" name="unidadeMesa" ng-model="mesa.unidade" required>
        <option value="">Selecione unidade</option>
    </select>
    <label>Número da mesa</label>
    <input class="form-control" type="text" name="numeroMesa" ng-model="mesa.numero" placeholder="Número da mesa">
    <button class="btn btn-block btn-primary btnAdicionar" ng-click="adicionar(mesa)">Adicionar</button>
</form>

controller

app.controller("MesasCtrl", ['$scope', '$http', '$window', '$location', '$rootScope', function ($scope, $http, $window, $location, $rootScope) {

$rootScope.idestabelecimento = localStorage.getItem('idestabelecimento');

var buscarEstabelecimento = function(){
    var opcao = 1; //Buscar estabelecimento
    $http.get("http://localhost:8888/sistemas/Android/areaAdmin/api/admin_estabelecimento/mesa.php?opcao="+opcao).success(function(response){

        $scope.cia = response;

    })
}

buscarEstabelecimento();

$scope.getUnidade = function(){

    $scope.selected = $scope.idestabelecimento;
    var key = $scope.selected;
    console.log("key :"+$scope.selected)
}

}]);

And regardless of the value I select in the first dropdown, the value in the console is always the same: "key: 4"

angularjs html5

asked by anonymous 22.07.2017 / 02:09

1 answer

Decimal mask on an ion-input of type "number" Error in declarations with Array

score 0 · Answer 1

To build a select that filters the next, so minimum example :

var app = angular.module("app", []);
app.controller("ctrl", function($scope, $filter) {
  $scope.dropItens1 = [{
      'value': 1,
      'text': 'Tenis'
    },
    {
      'value': 2,
      'text': 'Roupa'
    }
  ];
  
  $scope.dropSelected1 = 1;
  $scope.dropSelected2 = {};
  
  $scope.dropItens2 = [{
      'value': 1,
      'text': 'Adidas',
      'item': 1
    },
    {
      'value': 2,
      'text': 'Olimpikus',
      'item': 1
    },
    {
      'value': 3,
      'text': 'Camiseta',
      'item': 2
    },
    {
      'value': 4,
      'text': 'Calça',
      'item': 2
    }
  ];
  
  $scope.selectChange = function()
  {
    console.log("Item Selecionado:" + $scope.dropSelected1);
  }
  $scope.selectChange();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <select name="s1" ng-options="item1.value as item1.text for item1 in dropItens1" ng-model="dropSelected1" ng-change="selectChange()">  
  </select>

  <select name="s2" ng-options="item2.value as item2.text for item2 in dropItens2 | filter:{ item : dropSelected1 }" ng-model="dropSelected2">  
  </select>

</div>

Minimum example with search done in the database

Tables

Html

<!DOCTYPEhtml><htmllang="en" ng-app="app">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <style>
            form.label {
                width: 150px;
            }
        </style>      
        <!--<link href="css/style.css" rel="stylesheet">-->        
    </head>
    <body ng-controller="indexCtrl"> 
    <div>
          <select name="s1" ng-options="item1.idestabelecimento as item1.nome for item1 in dropItens1" ng-model="dropSelected1" ng-change="selectChange()">  
          </select>

          <select name="s2" ng-options="item2.idunidade as item2.nome for item2 in dropItens2" ng-model="dropSelected2">  
          </select>
    </div>          
        <script src="js/angular.min.js"></script>        
        <script>
            var app = angular.module('app', []);

            app.controller("indexCtrl", ["$scope", "$http", function($scope, $http)
            {
                $scope.dropItens1 = [];
                $scope.dropSelected1 = 0;

                $scope.dropItens2 = [];        
                $scope.dropSelected2 = 0;

                $scope.selectChange = function()
                {
                    $scope.dropItens2 = [];
                    $scope.dropSelected2 = 0;
                    $http.get('rest.php?select=2&&id=' + $scope.dropSelected1)
                        .then(function($result){                            
                            $scope.dropItens2 = $result.data;
                            $scope.dropSelected2 = $result.data[0].idunidade;                            
                        });
                }

                $scope.init = function()
                {
                    $http.get('rest.php?select=1')
                        .then(function($result){                            
                            $scope.dropItens1 = $result.data;
                            $scope.dropSelected1 = $result.data[0].idestabelecimento;
                            $scope.selectChange();
                        });
                }
                $scope.init();
            }]);

        </script>
    </body>
</html>

PHP

<?php

    function getConexao()
    {
        $dns = 'mysql:host=localhost;dbname=testdb';
        return new pdo($dns, 'root', 'senha');
    }

    $pdo = getConexao();

    function getEstabeleciomento($pdo)
    {
        $result = $pdo->query('SELECT * FROM 'estabelecimento'', PDO::FETCH_ASSOC);
        $result->execute();
        return json_encode($result->fetchAll());
    }


    function getUnidade($pdo, $id = 0)
    {
        $result = $pdo->prepare('SELECT * FROM 'unidade' where idestabelecimento=?');
        $result->bindValue(1, $id, PDO::PARAM_INT);
        $result->execute();
        return json_encode($result->fetchAll());
    }

    $select = isset($_GET['select']) 
        ? (int)$_GET['select']
        : 1;


    if ($select === 1) echo getEstabeleciomento($pdo);
    if ($select === 2) 
    {
        $id = $_GET['id'];
        echo getUnidade($pdo, (int)$id);
    }

Note: This code can still be optimized, at first to only have one request, but, I left it so, so you can understand how it would work.