Home > Developer > Web Develop
Let's look at an example of selecting Li list:
Click on any of the items in Li to highlight the clicked Li:
<!DOCTYPE HTML><HTMLNg-app><Head> <title>6.3CSS Classes and Styles</title> <MetaCharSet= "Utf-8"> <Scriptsrc=".. /angular.js "></Script> <Scriptsrc= "Script.js"></Script> <styletype= "Text/css">Li.cur{background:#C0DCC0} </style></Head><Body><DivNg-controller= "Restaurant"> <ul> <Ling-repeat= "Restaurant in restaurants"Ng-class= "{cur:$index ==selrow}"Ng-click= "Choose ($index)"> <span>{{Restaurant.name}}</span><span>{{Restaurant.food}}</span><span>{{Restaurant.price}}</span> </Li> </ul></Div></Body></HTML>
function Restaurant ($scope) { null; = [ {' name ': ' Happy lemon ', ' food ': ' GreenTea ', ' price ': ' ￥15 '}, {' name ': ' Coco ', ' food ': ' Milktea "," Price ":" ￥10 "}, {" name ":" Good Fruit "," food ":" Fruits "," price ":" ￥20 "} ]; function (i) { = i }} ng-class = "{cur: $index ==selrow }":
Here, the Cur class name of the Ng-class property, the binding expression $index = =selrow,
and then give each li a fixed-point click event Callback, click on any Li, the value of Selrow into $index. This way, the currently clicked item is added with the class name cur, highlighted.
Here you can see that the angular bound event callback can pass in the parameter
original state at execution time:
Click the second item:
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
