How to load dropdown list using angularJS and php

Question

How to load dropdown list using angularJS and php

Navigation

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

0

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

Does anyone know how to do this?

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>

php angularjs

asked by anonymous 14.12.2015 / 21:34

2 answers

Problem with JPA using Wildfly 9 and JTA What is the endpoint interface in EJB? [duplicate]

score 1 · Answer 1

Do not make the request using $.http of jQuery , it runs outside of the 'environment' of the angle which forces you to update $scope . In your example, for it to work, you just need to encapsulate the value's signature in the $apply method of the scope.

Here's an 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:

link

(I did not post right here on stackoverflow because you're still in trouble)

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

An important feature is that maintained by John Papa ( link )

score 0 · Answer 2

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