1.ng-class
(1)
<style>
.red{
background: red;
color: #fff;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p ng-class="abc">安徽啊，就安化路诶于海峰斤是为框架锕锕嗄安徽a.h吖哈服用过层面上</p>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',['$scope',function(scope){
scope.abc='red';
}]);
</script>
(2)
<style>
.red{
background:red;
}
.green{
background: green;
}
.blue{
background: blue;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-model="abc">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<h1 ng-class="abc">爱极客很搭上次按时，吃吧爱是火车爱是，不好吃暗示会开车</h1>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',['$scope',function(scope){
scope.abc='red';
}])
</script>
</body>
(3)
<style>
.red{
background:red;
}
.green{
background: green;
}
.blue{
background: blue;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button ng-click=getSec()>获取当前的秒数</button>
<h1 ng-class="{red:x%2==0,blue:x%2!=0}">当前的秒数为:{{x}}</h1>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',['$scope',function(scope){
scope.getSec=function(){
scope.x=new Date().getSeconds();
}
}])
</script>
</body>
（4）
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.red{
background: red;
}
.pink{
background: pink;
}
.green{
background: green;
}
ul li{
height: 40px;
font-size: 25px;
}
</style>
</head>
<body ng-app="myApp">
<ul ng-controller="myCtrl">
<li ng-repeat="d in data" ng-class="{red:$first,pink:$middle,green:$last}">
<span>编号：{{$index}}</span>
<span>{{d.name}}</span>
<span>{{d.sex}}</span>
</li>
</ul>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',['$scope',function(scope){
scope.data=[
{'name':'张三','sex':'男'},
{'name':'张三2','sex':'男2'},
{'name':'张三3','sex':'男3'},
{'name':'张三4','sex':'男4'}
];
}]);
</script>
效果图：
2.从远程服务器读取数据
（1）tab切换
注意：ng-repeat遍历的是数组格式的
<script src="angular-1.5.8.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 450px;
padding: 20px;
margin:50px auto 0;
border:1px solid red;
}
.box ul li{
margin: 10px 0 0;
}
.con1 .a1,.con2 .a2,.con3 .a3,.con4 .a4{
background: pink;
color: #fff;
}
</style>
</head>
<body ng-app="myApp" ng-init="x='con1'">
<div ng-controller="myCtrl" class="box">
<nav ng-class="x">
<a ng-click="x='con1'" class="a1" href="#">新闻</a>
<a ng-click="x='con2'" class="a2" href="#">热点</a>
<a ng-click="x='con3'" class="a3" href="#">八卦</a>
<a ng-click="x='con4'" class="a4" href="#">体育</a>
</nav>
<ul ng-show="x=='con1'">
<li ng-repeat="item in data1"><a href="{{item.url}}">{{item.title}}</a></li>
</ul>
<ul ng-show="x=='con2'">
<li ng-repeat="item in data2"><a href="{{item.url}}">{{item.title}}</a></li>
</ul>
<ul ng-show="x=='con3'">
<li ng-repeat="item in data3"><a href="{{item.url}}">{{item.title}}</a></li>
</ul>
<ul ng-show="x=='con4'">
<li ng-repeat="item in data4"><a href="{{item.url}}">{{item.title}}</a></li>
</ul>
</div>
</body>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',['$scope','$http',function(scope,http){
http.get('http://qd.bokanedu.com/tgr/api/index.aspx?day=82&type=tabs').success(function(d){
scope.data1=d.a1;
scope.data2=d.a2;
scope.data3=d.a3;
scope.data4=d.a4;
})
}])
</script>
效果图：
（2）另一种tab切换
<script src="angular-1.5.8.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 450px;
padding: 20px;
margin:50px auto 0;
border:1px solid red;
}
header{
overflow: hidden;
background: green;
height: 40px;
}
header .grid{
margin: 17px 15px 0 15px;
float: right;
width: 16px;
height: 16px;
background:url(images/02.png) 0 0 no-repeat;
}
header .list{
margin: 17px 15px 0 0;
float: right;
width: 16px;
height: 16px;
background:url(images/01.png) 0 0 no-repeat;
}
ul.list{
overflow: hidden;
}
ul.list li img{
width: 50px;
height: 50px;
}
ul.grid{
overflow: hidden;
}
ul.grid li{
float: left;
margin: 10px 0 0 25px
}
ul.grid li img{
width: 120px;
height: 120px;
}
.pink{
background: pink;
}
.purple{
background: purple;
}
</style>
</head>
<body ng-app="myApp" ng-init="x='list'">
<div ng-controller="myCtrl" class="box">
<header>
<a href="#" ng-click="x='grid'" class="grid"></a>
<a href="#" ng-click="x='list'" class="list"></a>
</header>
<ul class="list" ng-show="x=='list'">
<li ng-repeat="item in data" ng-class="{pink:$index%2==0,purple:$index%2!=0}">
<img ng-src="{{item.image}}" alt="">
<h3>{{item.title}}</h3>
<p>{{item.date}}</p>
</li>
</ul>
<ul class="grid" ng-show="x=='grid'">
<li ng-repeat=" item in data">
<img ng-src="{{item.image}}" alt="">
</li>
</ul>
</div>
</body>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',['$scope','$http',function(scope,http){
http.get('http://qd.bokanedu.com/tgr/api/index.aspx?day=82&type=search').success(function(d){
scope.data=d;
})
}])
</script>
效果图：
3.自定义指令写tab切换
<script src="jquery-2.1.14.min.js"></script> <script src="angular-1.5.8.min.js"></script> <style> .box{ width: 450px; margin: 50px auto 10px; background: #A6D0C4; } h1{ display: none; } h1.show{ display: block; } .select{ background: pink; } </style> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <div my-tab my-class="box" my-data="data1"> </div> <div my-tab my-class="box" my-data="data2"> </div> </div> </body> <script> var app=angular.module('myApp',[]); app.controller('myCtrl',['$scope',function(scope){ scope.data1=[ {'title':'星期一','content':'打豆豆'}, {'title':'星期二','content':'睡觉觉'}, {'title':'星期三','content':'看视频'}, {'title':'星期四','content':'吃零食'} ]; scope.data2=[ {'title':'星期五','content':'吃'}, {'title':'星期六','content':'玩'}, {'title':'星期日','content':'学'} ]; }]); app.directive('myTab',function(){ return { restrict:'ECMA', replace:true, scope:{ myClass:'@', myData:'=', myFn:'&' }, controller:['$scope',function(scope){ scope.abc='我是自定义指令'; }], template:'<div class="{{myClass}}"><button ng-class="{select:$first}" ng-repeat="d in myData">{{d.title}}</button><h1 ng-class="{show:$first}" ng-repeat=" d in myData">{{d.content}}</h1></div>', link:function(scope,element,attr,controller){ element.on('click','button',function(){ var i=$(this).index(); $(this).addClass('select').siblings('button').removeClass('select'); $(this).siblings('h1').eq(i).addClass('show').siblings('h1').removeClass('show'); }) } } }) </script>
效果图：
