Concepto ng-style de AngularJS
Este artículo explorará el ng-style de AngularJS con una expresión condicional. La directiva ng-style vincula el estilo a un elemento HTML.
Se usa cuando el estilo de un elemento necesita ser actualizado dinámicamente.
Directiva ng-style de AngularJS
El ng-style se puede usar con una expresión condicional para establecer dinámicamente el estilo de un elemento HTML en función de alguna condición.
Por ejemplo, si tiene un botón y desea que tenga diferentes colores según el color sobre el que se desplace, entonces usaría ng-style con una expresión condicional y establecería el color de fondo del botón para que dependa sobre si se está desplazando o no.
Sintaxis de ng-style:
<ANY ng-style="Any Conditional or non-conditional expression"></ANY>
El valor de la directiva ng-style puede ser cualquier expresión binaria o ternaria condicional. Además, recibe cualquier función de devolución de llamada definida dentro de la consola, que el controlador puede administrar según las necesidades.
También podemos usar la directiva ng-style para administrar la visualización y el estilo CSS en función del valor dado, de modo que se invoque ng-style y el estilo CSS se actualice cuando se modifique el valor del modelo.
La directiva ng-style se invoca en el nivel de prioridad 0 y tiene muy pocos límites de inserción. Debido a que algunos nombres de estilo CSS no son palabras clave válidas para objetos de ng-style, es fundamental poner siempre la clave de estilo CSS entre comillas simples.
Por último, podemos decir que una directiva ng-style es una herramienta poderosa para los desarrolladores que buscan crear un diseño receptivo con contenido dinámico. Puede crear animaciones y transiciones, aplicar diferentes estilos a diferentes tamaños de dispositivos, etc.
Pasos para usar la directiva ng-Style en AngularJS
Se necesitan los siguientes pasos para usar la directiva ng-style en AngularJS.
- Agregue la directiva
ng-styleal elemento HTML. - Agregue contenido de estilo dentro de las llaves.
- Agregue la propiedad de estilo con valor para la propiedad CSS dada. La directiva ng-style admite todas las propiedades de CSS, incluidos los colores, las fuentes y los colores de fondo.
Ejemplo de directiva ng-style en AngularJS
Analicemos un ejemplo para comprender mejor el ng-style de AngularJS.
Código JavaScript:
var app = angular.module('ngStyleApp', []);
app.controller('ngStyle', function($scope) {
$scope.bar = "88%";
});
Código HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.mainColor {
background-color: pink;
}
.AvenColor {
background-color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="ngStyleApp" ng-controller="ngStyle">
<div class="mainColor">
<div class="AvenColor" ng-style="{'width':bar}">
<h1> {{bar}} Profile Complete</h1>
</div>
</div>
</body>
</html>
Haga clic aquí para probar la demostración en vivo del código como se mencionó anteriormente.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook