Home > Developer > Web Develop
In the previous example, the class name of the element uses a concatenation method, so that the class name has to be true or false and is not easy to maintain, so angular uses the Ng-class property to control the class name of the element:
Let's take a look at a small example, click the Error button, the top of the bug box, click the Warning button, the top prompt warning box.
The class name of the error box is. Err, and the class name of the warning box is. Warn:
<!DOCTYPE HTML><HTMLNg-app><Head> <title>6.2CSS Classes and Styles</title> <MetaCharSet= "Utf-8"> <Scriptsrc=".. /angular.js "></Script> <Scriptsrc= "Script.js"></Script> <styletype= "Text/css"> *{font-family:' MICROSOFT Yahei ';font-size:12px}. Tip{margin:Auto;width:300px;Height:30px;Line-height:30px;text-align:Center; }. Err{Color:#A91818;background:#F3976C}. Warn{Color:#F3976C;background:#F6EBBC; }Button{Border:1px solid #ccc;Outline:0} </style></Head><Body><DivNg-controller= "Warnerr"> <Div> <Divclass= "Tip"Ng-class= "{err:iferr,warn:ifwarn}"Ng-show= "Ifshow">{{TipText}}</Div> </Div> <Div> <ButtonNg-click= "Showerr ()">Error</Button> <ButtonNg-click= "Showwarn ()">Warning</Button> </Div></Div></Body></HTML>
functionWarnerr ($scope) {$scope. Ifshow=false; $scope. TipText= ' '; $scope. Iferr =false; $scope. Ifwarn =false; $scope. Showerr=function() {$scope. Ifshow=true; $scope. TipText= ' ERROR: '; $scope. Ifwarn =false; $scope. Iferr =true; }; $scope. Showwarn=function() {$scope. Ifshow=true; $scope. TipText= ' Warning: '; $scope. Iferr =false; $scope. Ifwarn =true; }}
<class= "Tip" ng-class= "{err:iferr, warn:ifwarn}"ng-show=" Ifshow ">{{tipText}}</div>
Where err and warn are the class names to be selected, the ":" is followed by binding data, which determines whether the class name is added, if the value of the data is true, the class name is added, and vice versa is not added
Then we change the Boolean value of Iferr and Ifwarn by giving the button a fixed point click event, change the class name of the tip element and show the different prompt boxes.
Original state
After clicking the error button:
After clicking the warning button:
--------------------------------------------------------------------------------------------------------------- ------------------------------------------------
Legacy issues:
1. No mention of the use of Ng-style
2. The result of the expression of the property value is not only the string that separates the CSS class name with a space, but also the CSS class an array group, and the CSS class name to the Boolean value mapping. But the following two kinds of usage are unknown.
3. In the actual layout, the cue box element and the button element may be very far away. And not in the same div, but they need to share a controller, after the attempt, two div can not use the same controller. How the problem should be solved.
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
