表格示例

<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. 首次构建android studio gradle 下载缓慢的问题

    1.先使用其他工具下载gradle, https\://services.gradle.org/distributions/gradle-2.14.1-all.zip 2.然后放在C:\Users\A ...

  2. Swift 通用类型和通用函数 | Generic type and function

    如果你想交换两个变量的值: 1. 整型 func swapTwoInts(inout a: Int, inout b: Int) { let temporaryA = a a = b b = temp ...

  3. [AX2012]发送广播邮件

    AX 2012可以使用MAPI或者SMTP发送邮件,MAPI是客户端方法,需要outlook的协作,而SMTP则是服务器端方法,要求SMTP允许AOS服务器通过它中继.这里要讲的就是如何通过SMTP发 ...

  4. URL 学习总结

    1.绝对路径(以"/"斜线开头的路径,代表相对于当前Web应用): a)地址给服务器用,web应用名称可以省略. 请求包含:request.getRequestDispatcher ...

  5. Android-NDK编译:cocos2d-x（二）

    看了看NDK的文档....里面总是莫名的会提下windows需要cygwin环境... 但是cocos2d-x3.0alpha1 中, 编译samples的python脚本 cocos2d-x3/bu ...

  6. 如何在Xcode6中添加空模板

    在Xcode中模板位置: Macintosh HD ▸ 应用程序 ▸ Xcode(低于版本6的).app ▸ Contents ▸ Developer ▸ Platforms ▸ iPhoneOS.p ...

  7. 个性化EDM数据营销的三大提醒

    EDM数据营销行业已经进入个性化时代.但是怎样实现个性化仍然是一个重大课题.国内领先的智能化邮件营销服务商Focussend一直致力于探索和研究邮件营销领域的先进知识和做法,旨在为企业和个人提供更多有 ...

  8. Android SDK开发包国内下载地址

    不知道是因为最近kaihui还是怎么的,打开android sdk官方网站特别的慢,想下载最新版本的platform几乎变成不可能完成的任务,不知道为什么Google不像Apache那样在各国设立镜像 ...

  9. 自定义组件之MoreListView

    前言 本文针对自定义组件进行一些分析.还是那句老话“授之于鱼不如授之以渔”.今天要讲的是一个自定义的可以分页的ListView. 网上都讲了些ListView分页的方法,那么为什么我在这里还需要自己写 ...

  10. 另类angularjs应用

    回顾 上一篇文章主要讲解了创建兼容任意浏览器(主要是ie的一些奇葩问题)的angularjs web应用,但是项目开发中其实更重要的还是在功能的模块化.代码自动压缩上面,这样项目在后期维护或者功能的重 ...