2019独角兽企业重金招聘Python工程师标准>>>

根据Code School的视频完成简单angularjs1的实例

首先完成一个小实例，目的是了解表达式可以进行赋值

<!DOCTYPE html>
<html ng-app="store">
<head>
<meta charset="utf-8">

<script src="../lib/angular.min.js"></script>
<script type="text/javascript" src="../js/app4.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/bootstrap.min.css">
</head>
<body ng-controller="StoreController as store">
    <section>
        <ul class="nav nav-pills">
            <!-- ng-click对Tab进行了赋值 -->
            <li><a href="" ng-click="tab = 1">Description</a></li>
            <li><a href="" ng-click="tab = 2">Specifications</a></li>
            <li><a href="" ng-click="tab = 3">Reviews</a></li>
        </ul>
    </section>
    <!-- 只要在controller区域内肉可以使用{{}}表达式显示tab -->
    {{tab}}
</body>
</html>

(function(){
    var app = angular.module('store',[]);
    app.controller('StoreController',function(){
    });
})();

接下来要进行显示div，js文件不用修改

<!DOCTYPE html>
<html ng-app="store">
<head>
<meta charset="utf-8">

<script src="../lib/angular.min.js"></script>
<script type="text/javascript" src="../js/app4.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/bootstrap.min.css">
</head>
<body ng-controller="StoreController as store">
    <!-- 设置初始值让Tab=1，显示第一div，可以先试一下不写ng-init,最后再加上 -->
    <section ng-init="tab = 1">
        <ul class="nav nav-pills">
            <!-- ng-click对Tab进行了赋值,ng-class为li增加了高亮显示，目的是让整个列表项显得更加好看 -->
            <li ng-class="{active:tab === 1}"><a href="" ng-click="tab = 1">Description</a></li>
            <li ng-class="{active:tab === 2}"><a href="" ng-click="tab = 2">Specifications</a></li>
            <li ng-class="{active:tab === 3}"><a href="" ng-click="tab = 3">Reviews</a></li>
        </ul>
    </section>
    <!-- 通过===判断是否显示div -->
    <div class="panel" ng-show="tab === 1">
        <h4>Description</h4>
        <blockquote>None yet</blockquote>
    </div>
    <div class="panel" ng-show="tab === 2">
        <h4>Specifications</h4>
        <blockquote>None yet</blockquote>
    </div>
    <div class="panel" ng-show="tab === 3">
        <h4>Reviews</h4>
        <blockquote>None yet</blockquote>
    </div>
</body>
</html>

将逻辑抽象成方法，放到PanelController中

<!DOCTYPE html>
<html ng-app="store">
<head>
<meta charset="utf-8">

<script src="../lib/angular.min.js"></script>
<script type="text/javascript" src="../js/app4.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/bootstrap.min.css">
</head>
<body>
    <!-- 设置初始值让Tab=1，显示第一div，可以先试一下不写ng-init,最后再加上 -->
    <section ng-controller="PanelController as panel">
        <ul class="nav nav-pills">
            <!-- ng-click对Tab进行了赋值,ng-class为li增加了高亮显示，目的是让整个列表项显得更加好看 -->
            <li ng-class="{active:panel.isSelected(1)}"><a href="" ng-click="panel.selectTab(1)">Description</a></li>
            <li ng-class="{active:panel.isSelected(2)}"><a href="" ng-click="panel.selectTab(2)">Specifications</a></li>
            <li ng-class="{active:panel.isSelected(3)}"><a href="" ng-click="panel.selectTab(3)">Reviews</a></li>
        </ul>
        <!-- 通过===判断是否显示div -->
        <div class="panel" ng-show="panel.isSelected(1)">
            <h4>Description</h4>
            <blockquote>None yet</blockquote>
        </div>
        <div class="panel" ng-show="panel.isSelected(2)">
            <h4>Specifications</h4>
            <blockquote>None yet</blockquote>
        </div>
        <div class="panel" ng-show="panel.isSelected(3)">
            <h4>Reviews</h4>
            <blockquote>None yet</blockquote>
        </div>
    </section>
    
</body>
</html>

(function(){
    var app = angular.module('store',[]);

app.controller('PanelController', function(){
        /*tab的初始值，不再使用ng-init进行设定，根据视频中说ng-init仅用于测试*/
        this.tab = 1;
        /*对tab进行设定*/
        this.selectTab = function(setTab){
            this.tab = setTab;
        }
        /*判断是否是和设定的值是相等的*/
        this.isSelected = function(checkTab){
            return this.tab === checkTab;
        }
    })
})();

转载于:https://my.oschina.net/u/3696747/blog/1590874

angularjs入门（四）相关推荐

  1. WPF入门(四)-线形区域Path内容填充之填充图(ImageBrush)

    WPF入门(四)->线形区域Path内容填充之填充图(ImageBrush) 原文:WPF入门(四)->线形区域Path内容填充之填充图(ImageBrush) 前面我们提到了Linear ...

  2. 文本分类入门(四)训练Part 1

    文本分类入门(四)训练Part 1 训练,顾名思义,就是training(汗,这解释),简单的说就是让计算机从给定的一堆文档中自己学习分类的规则(如果学不对的话,还要,打屁屁?). 开始训练之前,再多 ...

  3. Python爬虫入门四之Urllib库的高级用法

    1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 首先,打开我们的浏览 ...

  4. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  5. MySQL入门 (四) : JOIN 与UNION 查询

    1 使用多个表格 在「world」资料库的「country」表格中,储存世界上所有的国家资料,其中有一个栏位「Capital」用来储存首都资料,不过它只是储存一个编号:另外在「city」表格中,储存世 ...

  6. Jmeter Web 性能测试入门 (四)：一个小实例带你学会 Jmeter 脚本编写

    测试场景: 模拟并发100个user,在TesterHome 站内搜索VV00CC 添加线程组 添加HTTP信息头管理器 添加HTTP Sampler 填写HTTP Sampler中的信息 添加监听器 ...

  7. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  8. （转载）MFC入门(四)　　作者 zhoujiamurong

    关键字 MFC 原作者姓名 zhoujiamurong 介绍 这一节,介绍工具条和状态栏 读者评分 71 评分次数 18 正文 MFC入门(四) 工具条和状态栏 原创  作者:zhoujiamuron ...

  9. AngularJS进阶(四十)创建模块、服务

    AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...

  10. 算法入门四：函数与函数体：

    文章目录 算法入门四:函数与函数体: 引言: 函数与函数体: 章节介绍: 1.洛谷 p5735 Java 距离函数 2.洛谷 p5737 Java 闰年展示 3.洛谷 p5739 Java 计算阶乘 ...

最新文章

  1. python类方法可以访问类变量_python类变量可以从类方法访问？ - python
  2. mysql数据导库常用操作
  3. Java虚拟机（JVM）参数配置说明
  4. Mysql不同存储引擎的表转换方法
  5. Sentinel（十二）之实时监控
  6. html 适配 android,Android 版本适配 6~11
  7. STS插件_ springsource-tool-suite插件各个历史版本
  8. Git 学习笔记之 merge
  9. git 理解 HEAD^与HEAD~
  10. tcpdump抓两个网卡的包_Linux下网络抓包命令tcpdump详解（在wireshark中看包）
  11. 数字信号处理--FFT与蝶形算法--学习笔记
  12. cra脚手架安装typescript
  13. 外国同行看中国互联网“微创新”
  14. 《C语言及程序设计》实践参考——定期存款利息计算器
  15. 很常用的倒计时脚本，可任意设置时…
  16. 中国大陆已有IB学校243所
  17. 这才不是我想看的《时间简史》
  18. GDPR is coming!
  19. html仿短信聊天,前端开发JS模仿手机短信发送
  20. 待完成 14 python进阶

热门文章

  1. mysql创建新表失败_MySQL创建表失败的问题
  2. str python3_python3 str（字符串）
  3. mysql proxy性能差_两种MySQL-Proxy架构的测试对比记录
  4. docker卸载命令_使用docker完成生信分析环境搭建
  5. linux中terminal中编译源码,分享|Terminator：一款一个窗口包含多个终端的 Linux 终端仿真器...
  6. 华为老机器可以升级鸿蒙,鸿蒙OS手机将至，华为手机用户提问，老款机器能升级吗？...
  7. FPGA的设计艺术（8）最佳的FPGA开发实践之严格遵循过程
  8. FPGA逻辑设计回顾（11）FPGA以及PC中的RAM与ROM
  9. FPGA笔试题解析（一）
  10. 【 MATLAB 】通过不同样本数的同一个有限长序列作 DTFT 对比