[SOLUCIONADO] Actualizar AngularJS

jaloayzac · #1 (**permalink**) 25/09/2015, 13:12

Hola, tengo este Scrip en AngularJS V1.2.26

Aquí la parte HTML (index.html)

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Salud Colectivos</title>
 
    <!-- Bootstrap nucleo CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
    <!-- FontAwesome nucleo CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
    <div class="form-group">
        <label class="control-label col-xs-3">Prueba JSon III:</label>
    <div class="col-xs-8" ng-app ng-controller="usuariosController">
        <input ng-model="usuario" ng-change="cargausuarios()" placeholder="Buscar usuario" />
        <ul>
            <li ng-repeat="usuario in usuarios">
                <a ng-click="cambiausuario(usuario.DES_CLIENTE)">
                    Nombre: {{ usuario.DES_CLIENTE }} - Codigo: {{ usuario.COD_CLIENTE }}
                </a>
            </li>
        </ul>
    </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="Apps/app.js"></script>
    </body>
    </html>

Aquí mi Scrip en AnhgularJS (Apps/app.js)

Código Javascript:

Ver originalfunction usuariosController($scope,$http) {
 
    //Cada vez que modifiquemos el contenido del campo de texto haremos una petición a nuestra base de datos con valores relacionados
    $scope.cargausuarios = function(){
        $http({url: "Apps/json.php",
            method: "GET",
            params: {value: $scope.usuario}
        }).success(function(usuarios) {$scope.usuarios = usuarios;});
 
    }
 
    //Cuando eliges un usuario lo reemplaza en el campo de texto
    $scope.cambiausuario = function(usuario){
        $scope.usuario = usuario;
        $scope.usuarios = null;
    }
}

y aquí mi scrip en PHP para consultar la BD (Apps/json.php)

Código PHP:

Ver original<?php
//Preparamos la conexión con la base de datos
define('_root',$_SERVER['DOCUMENT_ROOT']);
require_once _root.'/Apps/db.class.php';
$conexion = db_connect();
 
//Si se busca algo ejecutamos un query y devolvemos los resultados en json
if($_GET['value'] != ""){
    $DES_CLIENTE = $_GET['value'];
    $conexion = db_connect();
    $sql = 'SELECT *
              FROM tb_cliente
             WHERE DES_CLIENTE
              LIKE ?
          ORDER BY DES_CLIENTE ASC';
    $params = array("%$DES_CLIENTE%");
    $query  = $conexion->prepare($sql);
    $query->execute($params);
    $array  = $query->fetchAll(PDO::FETCH_ASSOC);
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($array, JSON_FORCE_OBJECT);
    $query->closeCursor();
}
?>

Todo funciona muy bien, pero cuando quiero ejecutar el scrip con AngularJS V1.4.6 (Ultima Versión)
Simplemente el scrip no funciona.
Alguien podría indicarme como actualizar mi scrip a esta nueva versión de AngulaJS

jaloayzac · #2 (**permalink**) 25/09/2015, 16:17

Ya esta solucionado, esto faltaba

Código Java:

Ver originalangular
    .module('clienteApp', [])
    .controller("clientesController", clientesController);
function clientesController($scope,$http) {
 
    //Cada vez que modifiquemos el contenido del campo de texto haremos una petición a nuestra base de datos con valores relacionados
    $scope.cargaclientes = function(){
        $http({url: "Apps/json.php",
            method: "GET",
            params: {value: $scope.cliente}
        }).success(function(clientes) {$scope.clientes = clientes;});
    }
 
    //Cuando eliges un usuario lo reemplaza en el campo de texto
    $scope.cambiacliente = function(cliente){
        $scope.cliente  = cliente;
        $scope.clientes = null;
    }
}

En el HTML

Código HTML:

Ver original<div class="form-group">
                    <label class="control-label col-xs-3">Prueba JSon I (Area Solicitante):</label>
                    <div class="col-xs-8" ng-app="clienteApp" ng-controller="clientesController">
                        <input type="text" class="form-control" ng-model="cliente" ng-change="cargaclientes()" placeholder="Buscar Cliente" />
                        <ul>
                            <li ng-repeat="cliente in clientes">
                                <a ng-click="cambiacliente(cliente.DES_CLIENTE)">
                                    Nombre: {{ cliente.DES_CLIENTE }} - Codigo: {{ cliente.COD_CLIENTE }}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>