Mit der ngClass-Direktive können Sie CSS-Klassen durch Datenbindung eines Ausdrucks dynamisch festlegen. Die Dokumentation auf angularjs.org ist ziemlich klar, wie man verschiedene Arten von Ausdrücken schreibt, aber nicht alles ist dokumentiert. Ich werde kurz die dokumentierten Ausdrücke erklären und auch die, die nicht dokumentiert sind.
String-Syntax
Die String-Syntax ist einfach. Der Wert des Eingabeelements wird direkt als CSS-Klasse zum Legendenelement hinzugefügt. [code language="html"] <!DOCTYPE html> <html ng-app> <Kopf> <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <script data-require="angular.js@1.2.10" data-semver="1.2.10" src="https://code.angularjs.org/1.2.10/angular.js"></script> </head> <Körper> <div class="container"> <div class="row"> <form role="form"> <Feldsatz> <legend ng-class="text">String-Syntax</legend> <div class="form-group"> <input class="form-control" ng-model="text" placeholder="Typ: text-info, text-warning oder text-gefahr"><br> </div> </fieldset> </form> </div> </div> </body> </html> [/code]Array-Syntax
Die Array-Syntax verhält sich genauso wie die String-Syntax, nur dass Sie damit mehr als eine CSS-Klasse zu einem einzigen HTML-Element hinzufügen können. [code language="html"] <!DOCTYPE html> <html ng-app> <Kopf> <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <script data-require="angular.js@1.2.10" data-semver="1.2.10" src="https://code.angularjs.org/1.2.10/angular.js"></script> </head> <Körper> <div class="container"> <div class="row"> <form role="form"> <Feldsatz> <legend ng-class="[label, text]">Array-Syntax</legend> <div class="form-group"> <input class="form-control" ng-model="label" placeholder="Typ: label-info, label-warning oder label-gefahr"><br> <input class="form-control" ng-model="text" placeholder="Typ: text-muted oder text-success"><br> </div> </fieldset> </form> </div> </div> </body> </html> [/code]Karten-Syntax
Mit der Map-Syntax können Sie die CSS-Klasse anhand von durch Kommata getrennten Schlüssel-Wert-Paaren festlegen. Im folgenden Beispiel wird die CSS-Klasse label-info hinzugefügt, wenn der Wert von info wahr ist. Wenn die Werte von info und muted beide wahr sind, werden beide CSS-Klassen hinzugefügt. Für alle Ausdrücke, deren Werte wahr sind, wird also die CSS-Klasse hinzugefügt.
[code language="html"] <!DOCTYPE html> <html ng-app> <Kopf> <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <script data-require="angular.js@1.2.10" data-semver="1.2.10" src="https://code.angularjs.org/1.2.10/angular.js"></script> </head> <Körper> <div class="container"> <div class="row"> <Feldsatz> <legend ng-class="{'label-info': info, 'text-muted': muted}">Kartensyntax</legend> <div class="form-group"> <input type="checkbox" ng-model="info"> info (apply "label-info" class)<br> <input type="checkbox" ng-model="muted"> muted (apply "text-muted" class) </fieldset> </div> </div> </body> </html> [/code]Undokumentierte Ausdruckssyntax
Die vorherigen Beispiele sind gut dokumentiert und die Beispiele sprechen für sich selbst. Was aber, wenn Sie ein erforderliches Eingabeelement eines Formulars als ungültig markieren möchten
Zunächst müssen wir verfolgen, ob das Formular abgeschickt wurde. Wenn der Controller das erste Mal aufgerufen wird, wird die Bereichsvariable submitted auf false gesetzt. Nachdem das Formular abgeschickt wurde, wird die Bereichsvariable submitted auf true gesetzt. Danach prüfen wir, ob das Formular ungültig ist. Wenn das Formular ungültig ist, kehren wir zur Seite zurück oder wir können etwas mit den Formulardaten tun, z.B. sie an ein Backend senden.
[code language="javascript"] 'use strict'; angular.module('myApp', []). controller('MyAppCtrl', function() { this.submitted = false; var self = this; this.submit = function(form) { self.submitted = true; if (form.$invalid) { return; } else { // Tun Sie etwas mit dem Formular, z.B. es ins Backend stellen } } }); [/code]Wie können wir also einen Ausdruck für die ngClass-Direktive schreiben, der überprüft, ob die übergebene Bereichsvariable wahr ist und ob der Wert des Eingabeelements ungültig ist? Der HTML-Code bietet die Lösung.
[code language="html"] <!doctype html> <html ng-app="myApp"> <Kopf> <link src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.angularjs.org/1.2.10/angular.min.js"></script> </head> <body ng-controller="MyAppCtrl as ctrl"> <div class="container"> <div class="row"> <form class="form-horizontal" name="myForm" novalidate> <Feldsatz> <div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]"> <label for="meinFeld" class="control-label">Mein Feld</label> <input type="text" name="meinFeld" class="form-control" id="meinFeld" ng-model="meinFeld" required/> </div> <div class="form-group"> <button type="submit" class="btn btn-primary" ng-click="ctrl.submit(myForm)">Speichern</button> </div> </fieldset> </form> </div> </div> <script src="script.js"></script> </body> </html> [/code]Wie funktioniert das? Der Ausdruck zwischen den eckigen Klammern wird ausgewertet. Wenn das Ergebnis dieses Ausdrucks gleich true ist, wird die CSS-Klasse has-error hinzugefügt. Das war's. Um den Code in Aktion zu sehen, besuchen Sie diesen Plunker
Verfasst von
Arjan Wulder
Unsere Ideen
Weitere Blogs
Contact