再來看一個選擇li列表的例子:
點擊li中的任意項,被點擊的li高亮顯示:
<!DOCTYPE html>
<html ng-app>
<head>
<title>6.3css類和樣式</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
<style type="text/css">
li.cur {
background:#C0DCC0
}
</style>
</head>
<body>
<div ng-controller = "Restaurant">
<ul>
<li ng-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){
$scope.selRow = null;
$scope.restaurants = [
{"name":"happy lemon","food":"greenTea","price":"￥15"},
{"name":"coco","food":"milkTea","price":"￥10"},
{"name":"good fruit","food":"fruits","price":"￥20"}
];
$scope.choose = function(i){
$scope.selRow = i
}
}
ng-class="{cur:$index==selRow}":
在這里,ng-class屬性的cur類名,綁定表達式 $index==selRow,
然后給每個li綁定點擊事件回調,點擊任意li,就把selRow的值變為$index.這樣,當前被點擊的項就會被添加類名cur,高亮顯示.
這里可以看到,angular綁定的事件回調,可以在執行的時候傳入參數
原始狀態:
點擊第二項:
