1.单向绑定;单向绑定是将模型（Model）数据，按照写好的视图（view）模板生成HTML,然后追加到Dom中
即：Model--->controller--->view
2.双向绑定 ：可以实现模型（model）数据和视图（view）模型的双向传递
Model<--->controller<---->view
单向绑定的几种方式
1.插值语法 {{}};会闪烁；可以绑定多个值
2.ng-bind='属性'，不会闪烁，只能绑定一个值
3 ng-bind-template:不会闪烁可以绑定多个值
<p ng-bind-template="{{name}}--{{age}}"></p>
4 ng-cloak:防止闪烁》但是也设置样式值
双向绑定
image.png
捕获.PNG
tab切换
加ng-switch="type" 添加 ng-switch-when="html"
2.添加ng-mouseenter="enter('html')" 控制器监听 鼠标移动
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;
/*头部设置往下走3个像素,遮盖住下面的面的内容*/
position: relative;
top: 3px;
/*注意:一定要设置背景颜色*/
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></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
1.PNG
网友评论