angular绑定

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,...
    长沙熊大阅读 1,311评论 0 0
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,653评论 0 3
  • AngularJS AngularJS概述 介绍 简称:ng Angular是一个MVC框架 其他前端框架: Vu...
    我爱开发阅读 2,347评论 0 8
  • 1. 介绍 AngularJS是一款由Google公司开发维护的前端MVC框架,其克服了HTML在构建应用上的诸多...
    崔皓翔阅读 862评论 0 5
  • 不漂亮小姐有一个梦想,就是变漂亮,不仅减掉身体赘肉,还要把事儿做漂亮。听了不漂亮小姐的梦想后,小伙伴们都鼓励不漂亮...
    小文艺雪阅读 402评论 0 0