Programando PHP: AngularJS

Mostrando entradas con la etiqueta AngularJS. Mostrar todas las entradas

AngularJS: Estilos, visibilidad e Imágenes


<!DOCTYPE html>
<html ng-app="appEstilos">
<head>
    <meta charset="utf-8">
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <style>
        .claseGrande { font-family:arial;color:red;font-size:34px;}
    </style>
</head>
<body>

<div ng-controller    ="controlador1">
    <p ng-style="estilo_parrafo">En un lugar de la mancha</p>
    
    <p>Erase una vez <span ng-class="claseLSG">dentro de un mundo</span> gris</p>

    <button ng-click="cambiar_estilo();">Cambiar estilo del párrafo</button>
    <button ng-click="asignar_clase();">Asignar clase</button>
    <button ng-click="borrar_estilos();">Limpiar</button>
</div>

<script>
    var appLSG = angular.module('appEstilos', []);
    appLSG.controller('controlador1', ['$scope', function($scope) {
        $scope.cambiar_estilo = function() {
            $scope.estilo_parrafo = { 'background':'#2C2961', 'color':'#FFF'}
        }
        $scope.asignar_clase = function() {
            $scope.claseLSG = "claseGrande";
        }
        $scope.borrar_estilos = function() {
            $scope.estilo_parrafo = "";
            $scope.claseLSG = "";
        }
    }]);
</script>
</body>
</html>

Visibilidad (mostrar/ocultar)


<div ng-controller    ="controlador1">
    <p ng-show="mensaje">En un lugar de la mancha</p>
   
    <button ng-click="cambiando(true);">Mostrar mensaje</button>
    <button ng-click="cambiando(false);">Ocultar mensaje</button>
</div>

<script>
    var appLSG = angular.module('appEstilos', []);
    appLSG.controller('controlador1', ['$scope', function($scope) {
        $scope.cambiando = function(valor) {
            $scope.mensaje = valor;
        }
    }]);
</script>

Imágenes:


<div ng-controller    ="controlador1">
    <img ng-src="{{imagen_cargar}}"><br>
    <button ng-click="cambiando('james_stewart.jpg');">James Stewart</button>
    <button ng-click="cambiando('gary_cooper.jpg');">Gary Cooper</button>
</div>

...

$scope.cambiando = function(imagen) {
            $scope.imagen_cargar = imagen;
 }

AngularJS: Eventos

ng-click
ng-dblclick: doble click
ng-blur: perder el foco
ng-change: Cambia el tag <input> o <select> pero no cuando se cambia a consecuencias del propio modelo.
ng-cut: Cuando se produce el evento cut.

ng-keydown
ng-keyup
ng-keypress

ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup

AngularJS: filtrar datos


<!DOCTYPE html>
<html ng-app="appFiltrar">
<head>
    <meta charset="utf-8">
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="filtrar">
    Filtrar por: <input type="text" ng-model="buscar">
    <ul>
        <li ng-repeat="valor in arrActores | filter:buscar"> 
            {{ valor.nombre  }} ganó el Oscar en {{ valor.anno_oscar }}
        </li>
    </ul>
</div>

<script>
    var appLSG = angular.module('appFiltrar', []);
    appLSG.controller('filtrar', ['$scope', function($scope) {
        $scope.arrActores = [
              { 'nombre': 'James Stewart', 'anno_oscar': '1940' },   
              { 'nombre': 'Gary Cooper', 'anno_oscar': '1941' },
              { 'nombre': 'James Cagney', 'anno_oscar': '1942' },
              { 'nombre': 'Humphrey Bogart', 'anno_oscar': '1951' }
        ];
    }]);
</script>
</body>
</html>

AngularJS: CDN y uso de las directivas

Página oficial: https://angularjs.org/
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js

---------------------------------------------------------------------

Realizar cálculos a partir de valores que se introduzcan


<!DOCTYPE html>
<html ng-app="tiendadefruta">
<head>
    <meta charset="utf-8">
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>

<div ng-controller="controlador1">
    <h1>Promoción de Mangos a 2,50 € cada uno</h1>
    
    Cantidad que quieres: <input type="text" ng-model="cantidad"><br>
    Precio total: {{ cantidad * precio }}
</div>

<script>
    var appLSG = angular.module('tiendadefruta', []);
    
    appLSG.controller('controlador1', ['$scope', function($scope) {
        $scope.cantidad = 0;
        $scope.precio = 2.5;
    }]);
</script>
</body>
</html>

Realizar cálculos usando una función


<!DOCTYPE html>
<html ng-app="appCircunferencia">
<head>
    <meta charset="utf-8">
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="circunferencia">
    Diámetro: <input type="text" ng-model="diametro"><br>
    <button ng-click="calcularCircunferencia();" >Calcular circunferencia</button>
    El valor de la circunferencia es: {{ circunferencia }} 
</div>

<script>
    var appLSG = angular.module('appCircunferencia', []);
    
    appLSG.controller('circunferencia', ['$scope', function($scope) {
        var pi = 3.14;
        
        $scope.calcularCircunferencia = function() {
            $scope.circunferencia = $scope.diametro * pi
        };
    }])    ;
</script>
</body>
</html>

Directiva ng-repeat con texto simple:


<div ng-controller="leer_array">
    <ul>
        <li ng-repeat="valor in arrActores"> {{ valor }}</li>
    </ul>
</div>

...

appLSG.controller('leer_array', ['$scope', function($scope) {
        $scope.arrActores = ['James Stewart', 'Gary Cooper', 'James Cagney'];
    }]);

Directiva ng-repeat con array de objetos:


<ul>
        <li ng-repeat="valor in arrActores"> 
            {{ valor.nombre  }} ganó el Oscar en {{ valor.anno_oscar }}
        </li>
    </ul>

...

appLSG.controller('leer_array', ['$scope', function($scope) {
        $scope.arrActores = [
              { 'nombre': 'James Stewart', 'anno_oscar': '1940' },  
              { 'nombre': 'Gary Cooper', 'anno_oscar': '1941' },
              { 'nombre': 'James Cagney', 'anno_oscar': '1942' }
        ];
    }]);

ccc

AngularJS: Estilos, visibilidad e Imágenes

AngularJS: Eventos

AngularJS: filtrar datos

AngularJS: CDN y uso de las directivas