1

Quero usar dois dropdowns no meu HTML5 Conforme o que eu selecionar na dropdown 1, exibe os respectivos dados na dropdown 2, como nesse link Busquei na documentação do angular isso que chegou bem próximo, mas ainda não deu certo. OBS: Ambos os valores dos dropdown, são carregados da api em php, e não colocados "á mão" como no link que passei acima

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)
}

}]);

E independente do valor que eu selecione no primeiro dropdown, o valor no console é sempre o mesmo: "key :4"

inserir a descrição da imagem aqui

5
  • Você tem dois dropdown e quer que um carregue o outro correto, mas, no seu código tem repeat e options no mesmo dropdown... isso que está errado.
    – novic
    Commented 22/07/2017 às 0:19
  • Olá @VirgilioNovic, ambos os dados carregados nos dropdowns vem do backend... Mas vou tentar usar seu exemplo Commented 24/07/2017 às 14:18
  • Opa @GustavoSevero, aonde estão dropItens1 e dropItens2 se carrega as informações, só muda isso o resto continua igual.
    – novic
    Commented 24/07/2017 às 14:33
  • Sim, tentei fazer isso, mas não deu certo kkkkk Fiz o seguinte: $scope.dropItens1 = [{'value': response.idestabelecimento}, {'text': response.nome}]; Commented 24/07/2017 às 14:51
  • Eu posso gerar um exemplo será que conseguiria entender com duas rest? dados dinâmicos?
    – novic
    Commented 24/07/2017 às 19:27

1 Resposta 1

0

Para construir um select que filtro o próximo, é assim, exemplo minimo:

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>
<script src="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>

Exemplo minimo com busca feita no banco de dados

Tabelas

inserir a descrição da imagem aqui

Html

<!DOCTYPE html>
<html lang="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);
    }

Observação: esse código ainda pode ser otimizado, no inicio para ter apenas uma requisição, mas, eu deixei assim, para que possa compreender como funcionaria.

12
  • Legal! Testei e funcionou. Porém, não sei como fazer funcionar com os meu códigos, pois os dados dos dropdowns vem de uma api, são carregados dinamicamente entende? Veja na descrição do post. Coloquei o retorno da api. Commented 24/07/2017 às 14:49
  • Ajustei, fiz isso: $scope.dropItens1 = [{ 'value': response[0].idestabelecimento, 'text': response[0].nome }, { 'value': response[1].idestabelecimento, 'text': response[1].nome }]; O problema é que tenho que colocar "response[0], response[1]", senão não funciona. Como posso alterar isso de forma dinâmica? Commented 24/07/2017 às 14:58
  • Voce tem que relacionar os nomes do seu em relação so meu, idestabelecimento = value, o retorno também é total na variável. @GustavoSevero
    – novic
    Commented 24/07/2017 às 16:43
  • Acabei de fazer isso... Deu certo, MAS, como te disse na mensagem anterior, tenho que fazer de forma que "response[0].idestabelecimento", essa posição zero, seja atualizado de forma dinâmica, entende? Não posso atualizar na mão. Commented 24/07/2017 às 17:32
  • @Gustavo coloque o que você fez na sua pergunta a minha resposta é genérica porque a sua pergunta também era
    – novic
    Commented 24/07/2017 às 18:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .