How to capture the value of a select in Ionic, AngularJs?

Question

How to capture the value of a select in Ionic, AngularJs?

Navigation

#1 by (0 votes)

0

The problem occurs when passing the value of a select, which I want later when ng-change detects a change a request is sent with the value of the id of the selected province, to then return the cities according to the province, but show that id in the view no problem, if not when I pass it in the controller I get undefined

THIS IS THE VISTA

    <ion-view title="Page" id="page6" style="" ng-controller="inicioCtrl">
    <ion-content padding="true" class="has-header">
    <form id="page-form1" class="list">
    <label class="item item-select" id="page-select1">
    <span >Región</span>
    <select ng-options="elemento.nombreRegion for elemento in region" ng-model="reg">
           <option value="">--Seleccione Una Opción--</option>
    </select>
  </label>

  <label class="item item-select" id="page-select2">
    <span class="input-label">Provincia</span>
    <select ng-model="pro" ng-change="cargarCiudades()" ng-options="item.idProvincia as item.nombreProvincia for item in provincias" >
        <option value="">--Seleccione Una Opción--</option>
    </select>
  </label>
  <label class="item item-select" id="page-select3">
    <span class="input-label">Comuna o Ciudad</span>
    <select ng-model="ciu" ng-options="item.idCiudad as item.nombreCiudad for item in ciudad" >
        <option value="">--Seleccione Una Opción--</option>
    </select>
  </label>
  <div id="page-container1" class="creator-container"></div>
</form>
    <!-- AQUI HAGO MIS PRUBAS DONDE SE MUETRAN LOS ID Y FUNCIONAN PERFECTO -->
<h1>{{reg.idRegion}}{{pro}}</h1>
<button id="page-button1" class="button button-positive  button-block">Guardar</button>

THIS IS MY DRIVER'S FILE

   angular.module('lista.controllers', [])

   .controller('inicioCtrl', ['$scope','$stateParams','$http', 
   function ($scope, $stateParams, $http) {

   var rutaUno = '//127.0.0.1/0/chileAlerta/datos.php';

 $http.post(rutaUno,{ accion : 'obtenerRegiones'})
    .success(function(data){
        console.log(data.contenido.regiones);
        $scope.region = data.contenido.regiones;
        //console.log(data.contenido.usuarios);
        //$scope.posts = data.contenido.usuarios;
    })
    .error(function(readyStatelt){
        console.log(readyStatelt);
        //console.log(textStatus);
        //console.log(errorThrown);

    });


$http.post(rutaUno,{ accion : 'obtenerProvincias'})
    .success(function(data){
        console.log(data.contenido.provincias);
        $scope.provincias = data.contenido.provincias;

        //console.log(data.contenido.usuarios);
        //$scope.posts = data.contenido.usuarios;
    })
    .error(function(readyStatelt){
        console.log(readyStatelt);
        //console.log(textStatus);
        //console.log(errorThrown);

    });

    //console.log($scope.pro);
   $scope.cargarCiudades = function(){
   alert($scope.pro);
  obtenerCiudades($http,$scope,$scope.pro);

   }

   function obtenerCiudades($http,$scope,idProvincia){

 console.log(idProvincia);
 $http.post(rutaUno,{ accion : 'obtenerCiudad','idPro': idProvincia})
    .success(function(data,status,headers,cofing){
        console.log(data);
            console.log(status);
            console.log(headers);
            console.log(cofing);

    })
    .error(function(readyStatelt){
        console.log(readyStatelt);


    });
   }

   }]);

AND THIS IS MY PHP ON THE SERVER

   <?php
   header("Access-Control-Allow-Origin: *"); 
   header("Access-Control-Allow-Headers: Content-Type");
//incluimos el script de conexion a la base de datos
include_once 'class.Conexion.php';
//declaramos la conexion


$data = json_decode(file_get_contents("php://input"));

$accion = ($data->accion);
$salidaJson = "";
$contenido = array();
$estado = false;
$existe = false;

   if($accion == 'obtenerProvincias'){

   getProvincias();

  }elseif($accion == 'obtenerCiudad'){

$idProvincia = (object)($data->idPro);
getCiudades($idProvincia);

    }else if($accion == 'obtenerRegiones'){

getRegiones();      

   }

   function getRegiones(){

 $db = new Conexion();
$sql = $db->query("SELECT * FROM regiones");

            if($db->rows($sql)> 0){

                $contenido['regiones'] = array();

                while($rew = $db->recorrer($sql)){

                    $region = array();

                    $region = array(
                        'idRegion' => $rew['id_region'],
                        'nombreRegion' => $rew['name_region']
                    );
                     array_push($contenido['regiones'],$region);
                }
                $existe = true;
                $estado  = true;
            }else{
                $estado = false;
                $existe = false;
            }
$salidaJson = array("contenido" => $contenido,
                   "estado" => $estado,
                   "existe" => $existe);

//header('Context-type: application/json');
echo json_encode($salidaJson);
  } 


   function getProvincias(){

 $db = new Conexion();
 $sql = $db->query("SELECT * FROM provincias");

            if($db->rows($sql)> 0){

                $contenido['provincias'] = array();

                while($rew = $db->recorrer($sql)){

                    $provincia = array();

                    $provincia = array(
                        'idProvincia' => $rew['id_provincia'],
                        'nombreProvincia' => $rew['nombre_provincia']
                    );
                     array_push($contenido['provincias'],$provincia);
                }
                $existe = true;
                $estado  = true;
            }else{
                $estado = false;
                $existe = false;
            }

    $salidaJson = array("contenido" => $contenido,
                   "estado" => $estado,
                   "existe" => $existe);

//header('Context-type: application/json');
echo json_encode($salidaJson);
  }


   function getCiudades($idProvincia){

  $db = new Conexion();
  /* $sql = $db->query("SELECT * FROM ciudades WHERE id_provincia=".$idProvincia."");

            if($db->rows($sql)> 0){

                $contenido['ciudades'] = array();

                while($rew = $db->recorrer($sql)){

                    $provincia = array();

                    $ciudades = array(
                        'idCiudad' => $rew['id_ciudad'],
                        'nombreCiudad' => $rew['nombre_ciudad']
                    );
                     array_push($contenido['ciudades'],$ciudades);
                }
                $existe = $idProvincia;
                $estado  = true;
            }else{
                $estado = false;
                $existe = false;
            }*/
$estado = false;
$existe = false;
$contenido = var_dump($idProvincia);/* este es el que se devuelve como erro <br />
  <b>Notice</b>:  Undefined property: stdClass::$idPro in <b>C:\dagg\htdocs    <ion-view title="Page" id="page6" style="" ng-controller="inicioCtrl">
    <ion-content padding="true" class="has-header">
    <form id="page-form1" class="list">
    <label class="item item-select" id="page-select1">
    <span >Región</span>
    <select ng-options="elemento.nombreRegion for elemento in region" ng-model="reg">
           <option value="">--Seleccione Una Opción--</option>
    </select>
  </label>

  <label class="item item-select" id="page-select2">
    <span class="input-label">Provincia</span>
    <select ng-model="pro" ng-change="cargarCiudades()" ng-options="item.idProvincia as item.nombreProvincia for item in provincias" >
        <option value="">--Seleccione Una Opción--</option>
    </select>
  </label>
  <label class="item item-select" id="page-select3">
    <span class="input-label">Comuna o Ciudad</span>
    <select ng-model="ciu" ng-options="item.idCiudad as item.nombreCiudad for item in ciudad" >
        <option value="">--Seleccione Una Opción--</option>
    </select>
  </label>
  <div id="page-container1" class="creator-container"></div>
</form>
    <!-- AQUI HAGO MIS PRUBAS DONDE SE MUETRAN LOS ID Y FUNCIONAN PERFECTO -->
<h1>{{reg.idRegion}}{{pro}}</h1>
<button id="page-button1" class="button button-positive  button-block">Guardar</button>
\chileAlerta\datos.php</b> on line <b>23</b><br />
  object(stdClass)#2 (0) {
  }
  {"contenido":null,"estado":false,"existe":false}*/
$salidaJson = array("contenido" => $contenido,
                   "estado" => $estado,
                   "existe" => $existe);

//header('Context-type: application/json');
echo json_encode($salidaJson);
   }






   ?>

php angularjs ionic mysqli

asked by Dagg 15.11.2016 в 00:53

source

1 answer

Data search [duplicate] Error 500 POST with Ionic and AngularJS

score 0 · Accepted Answer

The ng-model = pro already has the value of your <select> , the other is that you do not need to declare a function and send by parameter $http

While your ng-options should be something like this:

ng-options="item as item.nombreProvincia for item in items track by item.idProvincia"

Bearing in mind that items is your arrangement with the list of provinces

The $scope.pro has the same structure as your data, so if your city data for example is:

{
    idProvincia: 1,
    nombreProvincia: 'Provincia'
}

You can access the value of id with $scope.pro.idProvincia

.controller('inicioCtrl', ['$scope','$stateParams','$http', function ($scope, $stateParams, $http) {
    $scope.cargarCiudades = function(){
        $http({
            method: 'POST',
            url: '//127.0.0.1/0/chileAlerta/datos.php',
            data : {accion: 'obtenerCiudad', 'idPro': $scope.pro.idProvincia}

        }).then(function(response) {
            console.log(response);
        });
    }
}]);