Diferencias

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

--- unidades:04_masdirectivas:10_ngclass [2014/08/01 00:19] – admin
+++ unidades:04_masdirectivas:10_ngclass [2014/08/30 09:52] (actual) – admin
@@ Línea 31: / Línea 31: @@
 </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>
@@ 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".
-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:
@@ Línea 52: / Línea 52: @@
 </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>
 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>
 ===== Ejemplo =====
+El código completo del ejemplo es:
-{{url>http://embed.plnkr.co/pe2RVo}}
+<sxh css;title:style.css>
+.rojo {
+  color: red;
+}
+.subrayado {
+  text-decoration: line-through;
+}
+.negrita {
+  font-weight: bold;
+}
+</sxh>
+<sxh html;title:index.html;highlight: [17]>
+<!DOCTYPE html>
+<html ng-app="app">
+<head>
+  <link rel="stylesheet" href="style.css">
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
+  <script src="script.js"></script>
+</head>
+<body ng-controller="PruebaController">
+  <input ng-model="clasesCss.rojo" type="checkbox">Aplicar estilo Rojo
+  <br>
+  <input ng-model="clasesCss.subrayado"  type="checkbox">Aplicar estilo Subrayado
+  <br>
+  <input ng-model="clasesCss.negrita"  type="checkbox">Aplicar estilo Negrita
+  <br>
+  <br>
+  <div ng-class="clasesCss">Este es un texto con clases dinámicas</div>
+</body>
+</html>
+</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;highlight: [4,5,6,7,8]>
+var app = angular.module("app", []);
+app.controller("PruebaController", function($scope) {
+  $scope.clasesCss={
+    rojo:true,
+    subrayado:true,
+    negrita:false
+  }
+});
+</sxh>
+  * Linea 4: El objeto con las clases que pueden o no añadirse al tag HTML
+{{url>http://embed.plnkr.co/pe2RVo}}
 ===== Referencias =====
   * [[https://docs.angularjs.org/api/ng/directive/ngClass|ng-class]]