Home > Developer > Web Develop
Program Download: Https://files.cnblogs.com/files/xiandedanteng/angularJSRender.rar
Code:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTMLNg-app= "Notesapp"> <Head> <title>New Document</title> <style>. Odd{Background-color:Blue;width:300px; }. Even{Background-color:Pink;width:300px; } </style> <MetaCharSet= "Utf-8"> <Scriptsrc= "Angular1.4.6.min.js"></Script> </Head> <BodyNg-controller= "Mainctrl as CTRL"> <Divng-repeat= "Member in Ctrl.members"Ng-class= "Ctrl.getbackground (member.gender)">{{Member.id}}.name={{member.name}},age={{member.age}}<Div> </Body></HTML><Scripttype= "Text/javascript"><!--Angular.module ('Notesapp', []). Controller ('Mainctrl',[function(){ var Self= This; Self.members=[{ID:1, Name:'Andy', Age: -, Gender:'male'}, {ID:2, Name:'Bill', Age: +, Gender:'female'}, {ID:3, Name:'Cindy', Age: A, Gender:'female'}, {ID:4, Name:'Douglas', Age: at, Gender:'female'}, {ID:5, Name:'Einstein', Age: -, Gender:'male'}, ]; Self.getbackground=function(gender) {if(Gender=='male'){ return 'Odd'; }Else{ return 'even'; } }; }]);// -</Script>
Effect:
Points:
The ng-class directive is used to selectively add or remove CSS class from HTML elements
Angularjs Example of Ng-class
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
