表格示例

<div ng-app="myApp" ng-controller="customersCtrl">

<table>

  <tr ng-repeat="x in names | orderBy : 'Country'">

    <td>{{ $index + 1 }}</td>

    <td ng-if="$odd" style="background-color:#f1f1f1">

        {{ x.Name|uppercase  }}

    </td>

    <td ng-if="$even">

        {{ x.Name }}

    </td>

    <td ng-if="$odd" style="background-color:#f1f1f1">

        {{ x.Country|uppercase}}

    </td>

    <td ng-if="$even">

        {{ x.Country }}

    </td>

  </tr>

</table>

</div>

ng-disabled，ng-show，ng-hide 指令

<div ng-app="" ng-init="mySwitch=true">

　　<p>

　　　　<button ng-disabled="mySwitch">ng-disabled</button>

　　　　<button ng-show="mySwitch">ng-show</button>

　　　　<button ng-hide="mySwitch">ng-hide</button>

　　</p>

　　<p>

　　　　<input type="checkbox" ng-model="mySwitch"/>按钮

　　</p>

　　<p>

　　　　{{ mySwitch }}

　　</p>

</div>

ng-click事件

　　<div ng-app="myApp" ng-controller="personCtrl">

        <button ng-click="toggle()">隐藏/显示</button>

        <p ng-show="myVar">

            ng-show的情况: {{name}}

        </p>

        <p ng-hide="myVar">

            ng-hide的情况: {{name}}

        </p>

    </div>

    <script>

        var app = angular.module('myApp', []);

        app.controller('personCtrl', function($scope) {

            $scope.name="Troy123";

            $scope.myVar = true;

            $scope.toggle = function() {

                $scope.myVar = !$scope.myVar;

            };

        });

    </script>

AngularJS的一些通用API

使用ng-include包含HTML

<body>

<div class="container">

  <div ng-include="'myUsers_List.htm'"></div>

  <div ng-include="'myUsers_Form.htm'"></div>

</div>

</body>

AngularJS 使用动画需要引入 angular-animate.min.js 库。

还需要在Angular应用程序中使用<body ng-app="ngAnimate">

如果已经有ng-app的名字了，那么就加上这行代码

var app = angular.module('myApp', ['ngAnimate']);

在模块定义中 [] 参数用于定义模块的依赖关系。

var app = angular.module("myApp", []);

括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

<style>

div {

  transition: all linear 0.5s;

  background-color: lightblue;

  height: 100px;

  width: 100%;

  position: relative;

  top: 0;

  left: 0;

}

.ng-hide {

  height: 0;

  width: 0;

  background-color: transparent;

  top:-200px;

  left: 200px;

}

</style>

</head>

<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>

var app = angular.module('myApp', ['ngAnimate']);

</script>

ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

因为目的也只是入门而已，短期内也不会应用起来，所以写了这些就直接结束了 。

虽然觉得很突兀，但是确实没什么内容好写的。

花费的时间为3天，毕竟快速入门，很有趣的一个库。

【AngularJS学习笔记】02 小杂烩及学习总结的更多相关文章

  1. 软件测试之loadrunner学习笔记-02集合点

    loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...

  2. 机器学习实战（Machine Learning in Action）学习笔记————02.k-邻近算法（KNN）

    机器学习实战(Machine Learning in Action)学习笔记————02.k-邻近算法(KNN) 关键字:邻近算法(kNN: k Nearest Neighbors).python.源 ...

  3. OpenCV 学习笔记 02 使用opencv处理图像

    1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...

  4. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  5. OpenGL ES 学习笔记 - Overview - 小旋的博客

    移动端图形标准中,目前 OpenGL ES 仍然是比较通用的标准(Vulkan 则是新一代),这里新开一个系列用于记录学习 OpenGL ES 的历程,以便查阅理解. OverView OpenGL ...

  6. SaToken学习笔记-02

    SaToken学习笔记-02 如果排版有问题,请点击:传送门 常用的登录有关的方法 - StpUtil.logout() 作用为:当前会话注销登录 调用此方法,其实做了哪些操作呢,我们来一起看一下源码 ...

  7. Redis：学习笔记-02

    Redis:学习笔记-02 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 4. 事物 Redis 事务本 ...

  8. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  9. 《Java学习笔记(第8版)》学习指导

    <Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...

随机推荐

  1. 配置新系统（Win7 x64）

    新装了一个Win7 x64系统.总结了一些系统配置需要注意的地方. 1. C盘空间 发现C盘被用去了50G的空间,在什么软件都没装的情况下,被用去这么多,感到不可思议. 打开控制面板->文件夹选 ...

  2. IPFS搭建分布式文件系统 - 访问控制

    IPFS 一个内容可寻址.对等的超媒体分发协议. IPFS网络中的节点形成分布式文件系统. 为什么要用IPFS? “IPFS and the Blockchain are a perfect matc ...

  3. Linux探秘之I/O效率

    一.文章来由 最近看了<UNIX环境高级编程>,对以前比较模糊的一些知识结构又做了进一步的加强,特别是前两章讲到不带缓冲的文件I/O和带缓冲的标准I/O,对read.write.fread ...

  4. Android 模拟器 获得 root权限

    启动一个模拟器,开始-运行-输入cmd,打开dos,依次输入 adb shell mount -o remount,rw -t yaffs2 /dev/block/mtdblock3 /system ...

  5. osgi: HttpService A null service reference is not allowed.

    最近在学习osgi,在练习HttpService的过程中,一直出现“A null service reference is not allowed”这样的报错,代码本身没有问题,在网上也搜了不少地方, ...

  6. Log4net对数据库的支持

    记录到Oracle数据库中 <appender name="AdoNetAppender_Oracle" type="log4net.Appender.AdoNet ...

  7. Making Your ActionBar Not Boring

    这篇文章转自国外一个技术大牛的博客,首先感谢这位大牛的无私奉献. Android应用中有一名位 Google书报摊的应用,他实现了一种新的ActionBar风格.当用户初始进入该界面的时候,为一个透明 ...

  8. 轻量级linux CRUX安装笔记

    感谢hrdd的分享,原文出处:http://wxdhrdd.blog.163.com/blog/static/120500564200952592240867/ 以下是对原文进行补充 crux的安装: ...

  9. Linux 时钟与计时器

    对 Linux 系统来说,时钟和计时器是两个十分重要的概念.时钟反应的是绝对时间,也可认为是实时时间.计时器反应的则是相对时间,即相对于系统启动后的计时.操作系统内核需要管理运行时间(uptime)和 ...

  10. IE下angularJS页面跳转的bug

    用Angularjs做项目的过程中遇到一种情况:就是在IE浏览器下,当访问网站页面后,点击浏览器中的向左和向右(返回和前进)按钮时,需要点击两次才能正确跳转,但是在chrome及其他浏览器下该bug没 ...