表格示例

<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. 使用Ant编译提示Class not found: javac1.8

    无论是使用Eclipse还是使用Ant命令,都可能会在编译时遇到提示:Class not found: javac1.8 今天用Ant打包Android,apk,运行出现了batch_build.xm ...

  2. 使用Struts+Hibernate开发学生信息管理系统

    1.项目组织结构 2.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app vers ...

  3. CISA 信息系统审计知识点 [第一章. 信息系统审计过程 ]

    对有志成为审计师或者IT管理者de朋友, 第一章. 信息系统审计过程 1. IS 审计和保障标准.指南.工具.职业道德规范 信息技术保证框架(ITAF,Information Technology A ...

  4. Android Studio] Gradle项目中添加JNI生成文件(.so文件)

    转:http://blog.csdn.net/qiujuer/article/details/24209457 为了适应潮流使用Android Studio还是有半年多了! 对于从Eclipse迁移项 ...

  5. 【转】Xamarin Forms 介绍

    特此声明,本篇博文转自:http://blog.csdn.net/kinfey/article/details/29621381 什么是 Xamarin Forms ? Xamarin Forms 是 ...

  6. ora-01031:insufficient privileges解决方法 - 转

    今天晚上要远程修改一个分公司的数据库参数,于是下午先远程过去做些准备工作.数据库是oracle 11g rac,操作系统是windows 2008 server,我还是第一次见过windows下的or ...

  7. [转]优秀Python学习资源收集汇总

    Python是一种面向对象.直译式计算机程序设计语言.它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用縮进来定义语句块.与Scheme.Ruby.Perl ...

  8. 为Ubuntu笔记本电脑设置WiFi热点共享上网

    该文由土木坛子转译而来,说是转译,其实看截图就可以方便的设置,没有任何命令,全是图形界面,方便容易.我们都知道怎样在 windows 7 系统上如何设计 Wifi 热点,当你只有一条网线,多台计算机的 ...

  9. TeamViewer连接Windows8.1系统黑屏解决方案

    TeamViewer用win7连接win8.1 都是64位系统,总是黑屏,可以看到鼠标也联动了,聊天传输文件都没有问题,反向用win8.1连接win7也没问题,而且TeamViewer更新到最新版本了 ...

  10. Log4net对文件的支持

    RollingFileAppender循环记录日志(指定文件最大长度) <appender name="RollingFileAppender" type="log ...