AngularJS基本指令
<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>Hello AngularJS</title>
<script src="e:\angular.min.js"></script>
</head>
<body>
<div>
<input type="text" ng-model="yourname" placeholder="Enter a name here" />
<h1>Hello, {{ yourname }} !</h1>
</div>
</body>
</html>
这是AngularJS的一个小例子，不过还是觉得好神奇，好高大上。算了，不扯这个没用的了，这个例子我也是遇到了点问题。最万恶的问题是路径问题。这个估计我是弄不明白了，引用路径的时候一定要用“\”，而不是“/”。还有，是angular.min.js而不是angularjs.min.js。其次就是html那里忘记打ng-app，忘了指定它是angularjs了。
AngularJS通过ng-directives扩展了HTML，并以ng作为前缀的HTML属性。（HTML5允许以data扩展属性，所以使用data-ng-）
AngularJS表达式卸载双大括号内：｛｛expression｝｝
ng-app指令定义一个AngularJS应用程序。
ng-init指令初始化应用程序数据
ng-model指令把元素值绑定到应用中。
ng-bind指令把应用程序数据绑定到HTML视图。
ng-repeat重复一个HTML
<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>ng-repeat 数组</title>
<script src="e:\angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="names=[{name:'John',sex:'M'},{name:'Rose',sex:'F'},{name:'Lucy',sex:'F'}]">
<p>循环对象</p>
<ul>
<li ng-repeat="x in names" >
{{x.name+", "+x.sex}}
</li>
</ul>
</div>
</body>
</html>
ng-controller指令定义了应用程序控制器 控制器是js对象，由js对象的构造函数创建。控制器的$scope是控制器所指向的应用程序/HTML元素。
<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.fullName()}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
var x;
x = $scope.person;
return x.firstName + " " + x.lastName;
}
};
}
</script>
AngularJS过滤器用于转换数据。
currency 格式化数字为货币格式
filter 从数组项中选择一个子集。输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型。
lowercase 格式化字符串为小写
orderBy 根据某个表达式排列数组
uppercase 格式化字符串为大写
<div ng-app="" ng-controller="namesController">
<p>输入过滤：</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
ng-disabled指令直接绑定应用程序数序到HTML的disabled属性。
<div ng-app="">
<p>
<button ng-disabled="mySwitch">点我！</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>
</div>
ng-show显示或隐藏一个HTML元素。 true false
ng-click指令定义了一个AngularJS单击事件
控制器污染了全局命名空间，因此，将所有的控制器可以放置一个模块中，保持全局命名空间的整洁。
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
AngularJS基本指令的更多相关文章
- AngularJS之指令
紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- AngularJs自定义指令详解（2） - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- angularJS自定义指令间的“沟通”
由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- 《AngularJS》--指令的相互调用
转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
随机推荐
- Linux基础: 一切都是文件
一切都是文件 创建系统配置交换分区(用作虚拟内存)加上单根树 file 文件名 查看文件类型 uname 查看系统版本 bin binary二进制文件 所有用户可用 系统可执行命令的二进制文件(c ...
- (12)odoo各种提前期和时间
1)Product的提前期 Customer Lead Time(sale_delay):客户提前期,指SO确认到向客户发货的天数,由于销售数量不同该时间也不同,因此,这里是一个平均时间. ...
- 输出有序数组的中两个元素差值为指定值diff的两个元素
题目: 输出有序数组的中两个元素差值为指定值diff的两个元素. 思路: 这与输出两个元素的和的值为一定值类似,需要两个指针,不同的是:指针不是一左一右,而是一前一后. 如果差值等于diff,则返回: ...
- struts过滤器和拦截器的区别
拦截器的工作原理:当接收到一个httprequest ,a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标准的过滤器链 c) FilterDisp ...
- Linux中Matlab保存多个数据到同一个文件当中
% load pyrim % NumTrain = 50; % load machine %NumTrain = 150; % load housing % NumTrain = 300; % loa ...
- 继承多态绕点 Java篇
上一篇把C#语言的继承,多态里的特殊的情况做了一下总结,其实那一部分代码都是从Java翻译过去的,今天来总结一下Java在这种情况下是怎么调用的. 上一篇我们说的是:1.多态,只在多态系里方法调用,很 ...
- java json 的生成和解析 --json-lib
类(java json的解析和生成): import java.util.HashMap; import java.util.Map; import net.sf.json.JSONArray; im ...
- PHP函数——is_subclass_of() 函数 判断一个对象是否为一个类的子类
说明: bool is_subclass_of ( object $object , string $class_name ) 如果对象 object所属类是类 class_name的子类,则返回 T ...
- 更改电脑与eclpse热键冲突
- ant非法字符：\65279 错误
ant非法字符:\65279 错误前段时间用ant把项目打包,遇到一个问题:编译java文件的时候,有些java文件报非法字符 \65279错误,在网上找和很多方法,也试了很多方法,换JDK,网上说的 ...