Home > Developer > Web Develop
Original: http://blog.xebia.com/2014/01/31/ngclass-expressions-in-angularjs/
The ngclass directive allows you to dynamically set CSS classes by databinding an expression.
String SyntaxThe string syntax is very simple and straightforward, and the following code directly adds a text class to the legend element by ng-class= "text" .
<! DOCTYPE html>Array SyntaxThe
The array syntax is similar to string syntax, but the array syntax allows you to add more than one CSS class to an HTML element at a time (ng-class= "[Label, Text]").
<! DOCTYPE html>Map SyntaxMap syntax allows you to set CSS classes by separating key-value pairs with commas. In the following example, when the value of info is true, Lable-info is added to the legend element. If the value of muted is true, text-muted is added to the legend element.
<! DOCTYPE html>Undocumented Expression SyntaxIn the following example, when the controller is called for the first time, the value of the submitted variable is false. The submitted variable is set to True when the form is submitted. Next we check if the form is legal. If the form is illegal, return directly.
' Use strict '; Angular.module (' myApp ', []). Controller (' Myappctrl ', function () { this.submitted = false; var = this; This.submit = function (form) { self.submitted = true; if (form. $invalid) { return; } else { //something with the form like posting it to the backend } } });So how do we write an expression if submmited is true and the value of the input element is illegal, add a class. (ng-class= "{true: ' Has-error '}[ctrl.submitted && Myform.myfield. $error. Required] ")
<!doctype html>Ngclass Expressions in Angularjs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
