表格示例

<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. 解读Gartner《2015年度新兴技术成熟度曲线报告》

    详细见:http://www.360doc.com/content/16/0209/16/26186435_533443133.shtml 今年的报告评估了112个领域超过2000项新型技术的市场类型 ...

  2. EXCELL中怎么将两列数据对比，找出相同的和不同的数据？

    假设你要从B列中找出A列里没有的数据,那你就在C1单元格里输入“=IF(ISNA(VLOOKUP(B1,A:A,1,0)),"F","T")”显示T就表示有,F ...

  3. JSON处理

    var ajax = function () { mui.ajax(projectPath+'/goods/goodsprice.do', { dataType: 'json', type: 'pos ...

  4. Win7下安装配置gVim

    本文根据vim官网的<Simple Steps to Help You Install gVim on Windows 7>[1]一文整理而成. 1. 下载gVim 在http://www ...

  5. iOS开发备忘录：自定义UINavigationBar背景图片和Back按钮

    iOS项目,根据设计图,有时需要自定义UIView的UINavigationBar的背景.可以切出来一张1像素左右的背景图片,来充当UINavigationBar的背景. 可以利用Navigation ...

  6. ASP.NET MVC 的自定义模型属性别名绑定

    最近在研究 ASP.NET MVC 模型绑定,发现 DefaultModelBinder 有一个弊端,就是无法实现对浏览器请求参数的自定义,最初的想法是想为实体模型的属性设置特性(Attribute) ...

  7. c# 垮线程调用控件

    http://www.cnblogs.com/TankXiao/p/3348292.html

  8. Invalid Image Path - No image found at the path referenced under key "CFBundleIconFile": Icon.png

    I got the same error when uploading my app. Moving all icon files to the Asset Catalog works if your ...

  9. git Please move or remove them before you can merge. 错误解决方案

    git pull 时 往往会遇到各种各样的问题 ,下面是常遇到的一种状况 Updating 7c9e086..936acacerror: The following untracked working ...

  10. Android开发中内存和UI优化

    1.内存||效率 GC这东西对于开发人员用起来比较爽,但对于技术总监或产品总监来说,他们并不在乎,在乎的是用户运行App的流畅度,待你开发完了,笑眯眯的走过来,让你测试N个适配器,烦都烦死你. 说到这 ...