AngularJs记录学习01
<!doctype html>
<html ng-app="myapp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/Angular.js"></script>
<script>
//控制器注册
var myapp=angular.module("myapp", []).controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</head>
<body >
学习地址<br/>
http://www.yiibai.com/angularjs/angularjs_environment.html<br/>
http://docs.angularjs.cn/api/ng/filter/filter <span>指令集合</span> ng-app：设定作用域<br/>
ng-model：设定模型变量<br/>
ng-controller:设置某个控制器的作用域<br/>
ng-bind：绑定模型<br/>
ng-init：该指令初始化应用程序数据。<br/>
ng-repeat：该指令将重复集合中的每个项目的HTML元素。用于迭代<br/>
<p style="color:red;">注意点：angular.module("myapp", [])这样的注册只能有一次，其他地方使用会报错</p>
ng-disabled:禁用一个给定的控制<br/>
ng-show:显示一个给定的控制<br/>
ng-hide:隐藏在给定的控制<br/>
ng-click:表示AngularJS click事件<br/>
<br/>
<span>作用域对象</span> $scope：标示控制器的作用域 <br/>
<span>模型一</span><br/> Hello {{'World'}} {{123}}! <br/>
<br/>
<span>模型二</span><br/> Your name:
<input type="text" ng-model="yourname" placeholder="World">
Hello {{yourname || 'World'}}! <br/>
<br/>
<span>模型三</span><br/>
<table>
<tr>
<th>row number</th>
</tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
<td>{{i}}</td>
</tr>
</table>
<table>
<tr>
<th>row number</th>
</tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
<td>{{i+1}}</td>
</tr>
</table>
<br/>
<br/>
<span>模型四</span><br/>
<div ng-controller="HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Yiibai!</h2>
<br/>
<br/>
</div>
<span>模型五</span><br/> <p>我的名字:
<input type="text" ng-model="name">
</p>
<p>Hello, <span ng-bind="name"></span>!</p> <br/>
<br/>
<span>模型六</span><br/>
<div ng-app="myapp01" ng-init="countries=[{locale:'en-US',name:'United States'},{locale:'en-GB',name:'United Kingdom'},{locale:'en-FR',name:'France'}]">
{{countries}} <br/>
{{countries[0].name}}
</div>
<br/>
<br/>
<span>模型七</span><br/>
<script>
//自定义注册过滤器
myapp.filter('kavlezFilter',function(){
return function(input){
if(input){
return '1111:\"'+input+'"';
}
}
});
</script>
<input type="text" ng-model="student.firstName"><br/>
大写过滤: {{student.firstName | uppercase}}<br/>
小写过滤: {{student.firstName | lowercase}}<br/>
货币过滤: {{student.firstName | currency}}<br/>
自定义过滤: {{student.firstName | kavlezFilter}}<br/>
排序过滤:<br/>
<ul ng-repeat="i in [{name:'b'}, {name:'ab'}, {name:'a'}, {name:'bs'}]|orderBy:'name'">
<li>{{i.name}}</li>
</ul>
<br/>
<br/>
<span>模型八</span><br/>
<input type="checkbox" ng-model="enableDisableButton">Disable Button
<input type="radio" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button>
<br/>
<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>
<br/>
<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>
<br/>
<div ng-controller="TestController">
<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter = clickCounter + 1">Click Me!</button>
<button ng-click="clickTest()">Click Me!</button>
</div>
<script>
myapp.controller("TestController", function($scope) {
$scope.clickTest = function(){
$scope.clickCounter = $scope.clickCounter + 1;
};
});
</script>
支持事件<br/>
ng-click<br/>
ng-dbl-click<br/>
ng-mousedown<br/>
ng-mouseup<br/>
ng-mouseenter<br/>
ng-mouseleave<br/>
ng-mousemove<br/>
ng-mouseover<br/>
ng-keydown<br/>
ng-keyup<br/>
ng-keypress<br/>
ng-change<br/>
</body>
</html>
AngularJs记录学习01的更多相关文章
- AngularJs记录学习03
AngularJs的路由是一个组件,需要自己额外添加,在目录/src/ngRoute中 三个文件route.js,routeParams.js,ngView.js <html> <h ...
- AngularJs记录学习04
<html> <head> <title>Angular JS Views</title> <script src="js/Angula ...
- AngularJs记录学习02
<!doctype html> <html ng-app="myapp"> <head> <meta http-equiv="C ...
- 【iScroll源码学习01】准备阶段 - 叶小钗
[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文 http://www.cnblogs.com/yexiaochai/p/3 ...
- 天脉2（ACoreOS653）操作系统学习01
天脉2(ACoreOS653)操作系统学习01 由于我的毕业设计涉及相关嵌入式操作系统,故最近学了学天脉2操作系统. 一.ARINC653标准 1.ARINC653标准是什么? ARINC 653 : ...
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- 从0开始学angularjs－笔记01
一.angularjs简介 AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利 ...
- Java虚拟机JVM学习01 流程概述
Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...
- Android Testing学习01 介绍 测试测什么 测试的类型
Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...
随机推荐
- MFC中，如何自定义用户消息
1.用处 在多个类之间传递消息.当需要响应用户操作,本类却无法实现时,可以向系统发出消息.然后让系统中的需要的位置实现它. 2.方法 2.1定义这个消息,并让拥有者发送这个这个消息,传递一个整型参数 ...
- 最小生成树Kruskal算法
Kruskal算法就是把图中的所有边权值排序,然后从最小的边权值开始查找,连接图中的点,当该边的权值较小,但是连接在途中后会形成回路时就舍弃该边,寻找下一边,以此类推,假设有n个点,则只需要查找n-1 ...
- 增量升级（省流量更新）的Android客户端实现
转载与 zhouhuiah的专栏 http://blog.csdn.net/zhouhuiah/article/details/16939937 本文在以上两篇博客的基础上再增加了异常处理,并将生成的 ...
- 算法练习1 用c#编写的一个判定一组数是否是有序的
//判定数组是否有序 //总的程序代码如下: using System; using System.Collections.Generic; using System.Linq; using Syst ...
- [转]Markdown 语法手册
Markdown 是一种轻量级标记语言,能将文本换成有效的XHTML(或者HTML)文档,它的目标是实现易读易写,成为一种适用于网络的书写语言. Markdown 语法简洁明了,易于掌握,所以用它来写 ...
- [翻译]你不会想知道的kobject，kset，和ktypes
---------------------------------------------------------------------------------------------------- ...
- 全局变量 urllib模块 json模块
1.vars() 查看一个.py文件中的全局变量 print(vars()) #重点 __name__': '__main__ '__file__': 'C:/Users/lenovo/Pychar ...
- 【Framework】深入研究Asp.net页面的生命周期
介绍 Asp.net是微软.Net战略的一个组成部分.它相对以前的Asp有了很大的发展,引入了许多的新机制.本文就Asp.net页面的生命周期向大家做一个初步的介绍,以期能起到指导大家更好.更灵活地操 ...
- Bypass pattern lock on Sony Xperia Z2 and backup all data
Yesterday she came to me with a Sony Xperia Z2 D6503. Guess what? She forgot the pattern so she coul ...
- ASP.NET 项目 App_Code下无法找到类
APP_CODE 默认情况下,VS2010中新建的WebApplication中是没有App_Code文件夹的,若需要使用,可以自己手动添加文件夹,然后将文件夹名称设置为App_Code,然后在该文件 ...