How to load dropdown list using Angularjs and php

Question

How to load dropdown list using Angularjs and php

Asked 8 years, 11 months ago

Viewed 1,188 times

0

I was able to load a drop-down using php. Now I need to load the second drop-down, based on the selection of the first.

Someone knows how to do it?

Thanks.

<body ng-app="app" ng-controller="statecontroller">
<label>Categorias</label>
<select ng-model="categoria">
    <option value="">Selecione</option>
    <option ng-repeat="x in categorias" value="{{ x.id_categoria }}">{{ x.categoria }}</option>
</select>

<label>Subcategorias</label>
<select ng-model="subcategoria">
    <option value="">Selecione</option>
    <option ng-repeat="x in subcategorias" value="{{ x.id_subcategoria }}">{{ x.subcategoria }}</option>
</select>

<script src='js/angular.min.js'></script>
<script>
var app = angular.module("app",[]);
app.controller("statecontroller", ['$scope', '$http', function ($scope, $http) {
    $http.get("php/carregaCategorias.php").success(function(response) {
        $scope.categorias=response;
    });
}]);
</script>

1

Add the code.

– user28595

2015/12/14 at 20:50
I don’t have code @Diegofelipe

– GustavoSevero

2015/12/14 at 23:55
Gustavo, do the same thing for function uploadCategories.

– Cleiton

2015/12/16 at 18:39
Even though this part is working?

– GustavoSevero

2015/12/16 at 18:43
Dude, I said shit. I’m sorry. I’m not moving. LOL. What’s the status now? What’s going on?

– Cleiton

2015/12/16 at 18:46
Ta the way it is in the description. See above Cleiton

– GustavoSevero

2015/12/16 at 18:52
Hey, guys, any more tips?

– GustavoSevero

2015/12/17 at 11:41
2

It includes a workable solution in my question, it also follows a link to a Fiddler https://jsfiddle.net/ybjpvopn/, I hope it helped.

– Cleiton

2015/12/17 at 19:18

Show 3 more comments

2 answers

Browser other questions tagged php angularjs

You are not signed in. Login or sign up in order to post.

by Cleiton • **719** points · Answer 1 · 2015-12-16T17:47:58+00:00

Do not request using $.http of jQuery, it rotates outside the 'environment' of angular which forces you to update the $scope. In your example, to make it work, simply encapsulate the signature of the value in the method $apply of Scope.

Following example:

    $.post( urlService, data, function( response ) {
        if ( typeof response.cidades === 'undefined') {
            // Código para tratar erro
        }

        // Receber cidades enviados pelo PHP no formato
        // array( array('id'=>XXX,'nome'=>'yyyy', ...), ...)
        $scope.$apply(function(){ $scope.cidades = response.cidades;})
    });

A complete sample solution follows below:

https://jsfiddle.net/ybjpvopn/

(I didn’t post directly here at stackoverflow because you’re still in trouble)

I advise that, when you have time, read the guidelines of the Angularjs community, since it teaches some basic rules on code design and rules on separation of responsibilities.

An important resource is that maintained by John Pope (https://github.com/johnpapa/angular-styleguide )

by Marcio Jalber • **705** points · Answer 2 · 2015-12-14T21:58:32+00:00

HTML code:


<html>
    <head>...</head>
    <body ng-app = 'app'>
        <div ng-controller='MainController'>    
            <div class="form-group">
                <label for="estado">Estado</label>
                <select
                 id         = 'estado'
                 name       = 'estado'
                 ng-model   = 'ufSelecionado'
                 ng-options = '
                    estado.uf                       as
                    estado.uf + " - " + estado.nome for
                    estado                          in
                    estados'
                 ng-change  = 'listarCidades( ufSelecionado )'
                 required
                 >
                    <option value=''>[SELECIONE]</option>
                </select>
            </div>
            <div class="form-group">
                <label for="cidade">Cidade</label>
                <select
                 id         = 'cidade'
                 name       = 'cidade'
                 ng-model   = 'cidade'
                 ng-options = 'cidade.id as cidade.nome for cidade in cidades'
                 required
                 />
            </div>
        </div>
    </body>
    <script src='[caminho_do_jquery]/jquery.min.js'></script>
    <script src='[caminho_do_angular]/angular.min.js'></script>
    <script>
        // Receber estados do PHP e passar para o javascript
        // como uma array no formato array('uf'=>'nome do estado', ...)
        var estados = <?= json_encode( $estados ) ?>;
    </script>

Javascript code:

var dependencias = []; // Declare suas dependências
var App = angular.module( 'App', dependencias );

App.controller( 'MainController', function( $scope ) {

    // Integrar no AngularJs os estados do javascript
    $scope.estados  = estados;
    $scope.cidades  = null;

    // Função para carregar as cidades
    $scope.listarCidades = function( uf ) {
        var urlService  = '...'; // Digite a URL do serviço
        var data        = {
            uf          : uf,
        };

        $.post( urlService, data, function( response ) {
            if ( typeof response.cidades === 'undefined') {
                // Código para tratar erro
            }

            // Receber cidades enviados pelo PHP no formato
            // array( array('id'=>XXX,'nome'=>'yyyy', ...), ...)
            $scope.cidades = response.cidades;
        })
        .error( function() {
            // Código para tratar erro
        });
    }
});