angular绑定

作者: 刘相玉 | 来源:发表于2017-07-31 19:33 被阅读0次

重构过程中的信息记录二
angular-2
Angular 入门
6. Angular
angular,vue,react数据双向绑定原理分析
Angular学习第一天
vue菜鸟笔记
angular绑定
angular动画知识点以及代码样例
Angular5踩坑总结

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>![](images/01.png)</div>
    <div>![](images/02.png)</div>
    <div>![](images/03.png)</div>
    <div>![](images/04.png)</div>
</div>

</div>
</body>

</html>

1.PNG