angular寫的導航。自學angular已有一段時間。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='../angular-1.3.9/angular.js'></script>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
.listbox{
width:600px;
height: 30px;
margin: 0 auto;
border: 1px solid #ccc;
box-shadow: 2px 2px 3px #333;
}
.listbox li{
width: 100px;
float: left;
height: 30px;
line-height: 32px;
text-align: center;
cursor: pointer;
font-weight: bold;
color: #333;
font-family: '微軟雅黑';
border-radius:15px;
}
.listbox li.cour{
background: skyblue;
color:#fff;
text-shadow:1px 1px 1px #333;
}
</style>
</head>
<body ng-app='App'>
<ul ng-controller='cont' class='listbox'>
<li ng-repeat=' i in list' ng-click='cour($index)' ng-class="{ true :'cour',false:''} [i.isclick]">{{i.text}}</li>
</ul>
<script>
var data=[{text:'Home',isclick:false},{text:'News'},{text:'Project',isclick:false},{text:'Cooperate',isclick:false},{text:'About Us',isclick:false},{text:'More',isclick:false}];
var APP=angular.module('App',[]);//定義angular模塊
APP.controller('cont',function($scope){//angular控制器
$scope.list=data;//注入數據
$scope.list[0].isclick=true;//首個加樣式
$scope.cour=function(index){
//這里用了js實現的,不用js用angular要怎么實現
for(var i=0;i<$scope.list.length;i++){
$scope.list[i].isclick=false;//點擊的時候其他的都不加樣式
}
$scope.list[index].isclick=true;//ng-click時當前的添加樣式
}
})
</script>
</body>
</html>
ng-click的時候讓沒選中的都不加樣式，用angular需要用到什么呢？
我這里直接用js實現了，而且我感覺數據里的isclick:false不加，用變量也應該可以實現的！