1.單向綁定;單向綁定是將模型(Model)數(shù)據(jù)蒜绽,按照寫好的視圖(view)模板生成HTML,然后追加到Dom中
即:Model--->controller--->view
2.雙向綁定 :可以實現(xiàn)模型(model)數(shù)據(jù)和視圖(view)模型的雙向傳遞
Model<--->controller<---->view
單向綁定的幾種方式
1.插值語法 {{}};會閃爍;可以綁定多個值
2.ng-bind='屬性',不會閃爍,只能綁定一個值
3 ng-bind-template:不會閃爍可以綁定多個值
<p ng-bind-template="{{name}}--{{age}}"></p>
4 ng-cloak:防止閃爍》但是也設(shè)置樣式值
雙向綁定
tab切換
加ng-switch="type" 添加 ng-switch-when="html"
2.添加ng-mouseenter="enter('html')" 控制器監(jiān)聽 鼠標移動
3.ng-class="{cur:type=='html'}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
.box{
width: 1000px;
margin: 50px auto;
}
.box .title{
width: 400px;
height: 44px;
border: 3px solid #ccc;
/*頭部設(shè)置往下走3個像素,遮蓋住下面的面的內(nèi)容*/
position: relative;
top: 3px;
/*注意:一定要設(shè)置背景顏色*/
background: #fff;
border-bottom:none;
}
.box .content{
width: 1000px;
height: 475px;
border: 3px solid #ccc;
}
.box .content img{
width: 1000px;
height: 475px;
}
.box ul{
overflow: hidden;
}
.box ul li{
float: left;
padding: 10px;
}
.box ul .cur{
color:red;
font-size: 18px;
}
/*把所有content下面的div給隱藏掉*/
</style>
</head>
<body ng-app="app" ng-controller="tabController">
<div class="box">
<div class="title">
<ul>
<li>前端學院</li>
<li>iOS學院</li>
<li>java學院</li>
<li>UI精品學院</li>
</ul>
</div>
<div class="content">
<div>![](images/01.png)</div>
<div>![](images/02.png)</div>
<div>![](images/03.png)</div>
<div>![](images/04.png)</div>
</div>
</div>
</body>
</html>