Curso de AngularJS y REST

Herramientas de usuario

Herramientas del sitio

Traza:
unidades:04_masdirectivas:10_ngclass

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
unidades:04_masdirectivas:10_ngclass [2014/08/01 00:21] – [Ejemplo] adminunidades:04_masdirectivas:10_ngclass [2014/08/30 09:52] (actual) – admin
Línea 31: Línea 31:
 </sxh> </sxh>
  
-  * Línea 4: Se declara la propiedad "clasesCss" que contiene 3 propiedades, una por cada uno de las 3 clases CSS. Solo están a ''true'' las propiedades ''rojo'' y ''subrayado'' por lo que solo se aplicarán estas 2 clases CSS al elemento.+  * Línea 4: Se declara la propiedad "clasesCss" que contiene 3 propiedades, una por cada uno de las 3 clases CSS. Sólo están a ''true'' las propiedades ''rojo'' y ''subrayado'' por lo que sólo se aplicarán estas 2 clases CSS al elemento.
  
 <sxh html> <sxh html>
Línea 39: Línea 39:
 Ahora al aplicar la directiva ''ng-class'' al tag ''<div>'' se aplicarán las clases CSS "rojo" y "subrayado". Ahora al aplicar la directiva ''ng-class'' al tag ''<div>'' se aplicarán las clases CSS "rojo" y "subrayado".
  
-Pero ahora todo esto tiene una ventaja. Al ser valores del $scope los podemos modificar desde AngularJS y automáticamente se modificarán las clases CSS.+Pero ahora todo ésto tiene una ventaja. Al ser valores del $scope los podemos modificar desde AngularJS y automáticamente se modificarán las clases CSS.
  
 Ahora podemos añadir los siguientes tags <input> para modificar desde la propia página las clases CSS que se aplican: Ahora podemos añadir los siguientes tags <input> para modificar desde la propia página las clases CSS que se aplican:
Línea 52: Línea 52:
 </sxh> </sxh>
  
-Gracias a estos "checkbox" podemos fácilmente modificar que estilos se aplican a un tag HTML.+Gracias a estos "checkbox" podemos fácilmente modificar qué estilos se aplican a un tag HTML.
  
 <note> <note>
 AngularJS soporta también que en vez de ser la propiedad del ''$scope'' un objeto con las clases sea también un array con el nombre de las clases CSS o un único String con los nombres de las clases separadas por espacios. AngularJS soporta también que en vez de ser la propiedad del ''$scope'' un objeto con las clases sea también un array con el nombre de las clases CSS o un único String con los nombres de las clases separadas por espacios.
 +
 +Sin embargo, estas 2 formas las veo menos útiles que la que he explicado, pero por supuesto pueden ser mas cómodas de usar según la ocasión.
 </note> </note>
  
Línea 73: Línea 75:
 </sxh> </sxh>
  
-<sxh html;title:index.html>+<sxh html;title:index.html;highlight: [17]>
 <!DOCTYPE html> <!DOCTYPE html>
 <html ng-app="app"> <html ng-app="app">
Línea 96: Línea 98:
 </sxh> </sxh>
  
 +  * Linea 17: Con la directiva ''ng-class'' se indica el nombre de la propiedad que contiene las clases a mostrar.
  
-<sxh js;title:script.js>+<sxh js;title:script.js;highlight: [4,5,6,7,8]>
 var app = angular.module("app", []); var app = angular.module("app", []);
        
Línea 109: Línea 112:
 </sxh> </sxh>
  
 +  * Linea 4: El objeto con las clases que pueden o no añadirse al tag HTML
  
 {{url>http://embed.plnkr.co/pe2RVo}} {{url>http://embed.plnkr.co/pe2RVo}}
- 
 ===== Referencias ===== ===== Referencias =====
   * [[https://docs.angularjs.org/api/ng/directive/ngClass|ng-class]]   * [[https://docs.angularjs.org/api/ng/directive/ngClass|ng-class]]
unidades/04_masdirectivas/10_ngclass.1406845308.txt.gz · Última modificación: por admin