Home > Developer > Web Develop
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 </Head>7 <!--8 Common directives (ii)9 * Ng-class: Dynamic reference defined style {aclass:true, bclass:false}Ten * Ng-style: Dynamically referencing the style object specified by JS {color: ' red ', background: ' Blue '} One * Ng-click: Tap Listen, value is function call, can pass $event A * Ng-mouseenter: The mouse is moved into the listener, the value is function call, can pass $event - * Ng-mouseleave: Mouse out Listener, value is function call, can pass $event - - the <style> - . Evenb{ - Background-color:Lightsalmon; - } + - . ODDB{ + Background-color:LightGreen; A } at </style> - <BodyNg-app= "MYAPP"> - <DivNg-controller= "Myctrl"> - <Divstyle= "width:200px;height:100px;"Ng-style= "MyStyle"Ng-mouseenter= "Enter ()"Ng-mouseleave= "Leave ()"> - </Div> - <!--$odd $even interlaced color using the Ng-class and Ng-repeat self-band Properties - in <ul> - <LiNg-class= "{oddb: $odd, Evenb: $even}"ng-repeat= "x in Persons">{{X.username}}--{{x.age}}</Li> to </ul> + </Div> - the <Scripttype= ' Text/javascript 'src=".. /.. /js/angular-1.5.5/angular.js "></Script> * <Scripttype= "Text/javascript"> $ Angular.module ('myApp', [])Panax Notoginseng . Controller ('Myctrl', function($scope) { - $scope. MyStyle={background:'Lightgray'}; //add an initialized background color the $scope. Enter= function () { + This. Mystyle.background= 'Pink';//mouse move in background color A }; the $scope. Leave= function () { + This. Mystyle.background= 'LightBlue'; - }; $ $scope. Persons=[ $ {username:'kobe1', Age:' the'}, - {username:'Kobe2', Age:' the'}, - {username:'kobe3', Age:' the'}, the {username:'Kobe4', Age:' the'}, - {username:'Kobe5', Age:' the'},Wuyi ]; the }) - </Script> Wu </Body> - About </HTML>
Angular JS-7-Angular JS common instruction 2
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
