Konzept des AngularJS ng-style
In diesem Artikel wird der ng-style von AngularJS mit einem bedingten Ausdruck untersucht. Die Direktive ng-style bindet den Stil an ein HTML-Element.
Es wird verwendet, wenn der Stil eines Elements dynamisch aktualisiert werden muss.
AngularJS ng-style Direktive
Der ng-style kann mit einem bedingten Ausdruck verwendet werden, um den Stil eines HTML-Elements basierend auf einer bestimmten Bedingung dynamisch festzulegen.
Wenn Sie beispielsweise eine Schaltfläche haben und möchten, dass sie unterschiedliche Farben hat, je nachdem, über welche Farbe sie bewegt wird, dann würden Sie ng-style mit einem bedingten Ausdruck verwenden und die Farbe des Hintergrunds der Schaltfläche abhängig machen davon, ob darüber gefahren wird oder nicht.
Syntax von ng-style:
<ANY ng-style="Any Conditional or non-conditional expression"></ANY>
Der Wert der ng-style-Direktive kann jeder bedingte binäre oder ternäre Ausdruck sein. Darüber hinaus erhält er eine beliebige, in der Konsole definierte Callback-Funktion, die der Controller je nach Bedarf verwalten kann.
Wir können auch die Direktive ng-style verwenden, um das Display- und CSS-Styling basierend auf dem angegebenen Wert zu verwalten, sodass ng-style aufgerufen und das CSS-Styling aktualisiert wird, wenn sich der Modellwert ändert.
Die Direktive ng-style wird auf Prioritätsebene 0 aufgerufen und hat sehr wenige Einfügungsbeschränkungen. Da einige CSS-Stilnamen keine gültigen Schlüsselwörter für ng-style-Objekte sind, ist es wichtig, den CSS-Stilschlüssel immer in einfache Anführungszeichen zu setzen.
Abschließend können wir sagen, dass eine Direktive im ng-style ein mächtiges Werkzeug für Entwickler ist, die ein ansprechendes Design mit dynamischen Inhalten erstellen möchten. Es kann Animationen und Übergänge erstellen, verschiedene Stile auf verschiedene Gerätegrößen anwenden usw.
Schritte zur Verwendung der ng-Style-Direktive in AngularJS
Die folgenden Schritte sind notwendig, um die Direktive ng-style in AngularJS zu verwenden.
- Fügen Sie dem HTML-Element die Direktive
ng-stylehinzu. - Fügen Sie Stilinhalt innerhalb der geschweiften Klammern hinzu.
- Stileigenschaft mit Wert für die gegebene CSS-Eigenschaft hinzufügen. Die Direktive ng-style unterstützt alle CSS-Eigenschaften, einschließlich Farben, Schriftarten und Hintergrundfarben.
Beispiel einer ng-style Direktive in AngularJS
Lassen Sie uns ein Beispiel besprechen, um AngularJS ng-style besser zu verstehen.
JavaScript-Code:
var app = angular.module('ngStyleApp', []);
app.controller('ngStyle', function($scope) {
$scope.bar = "88%";
});
HTML Quelltext:
<!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>
Klicken Sie hier, um die oben erwähnte Live-Demonstration des Codes zu testen.
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