angularJS内置指令一览
基础ng指令
- ng-href
- ng-src
- ng-disabled
- ng-readonly
- ng-checked
- ng-selected
- ng-class
- ng-style
- ng-show
- ng-hide
- ng-repeat
- ng-init
- ng-if
- ng-bind
- ng-bind-template
- ng-cloak
- ng-model
- ng-click
- ng-change
- ng-submit
- ng-include
内置指令说明
a.ng-href
使用说明: 当使用当前作用域中的属性动态创建URL时,应该用ng-href代替href。
解决潜在问题当用户点击一个由插值动态生成的链接时,如果插值尚未生效,将会跳转 到错误的页面(通常是404)
b.ng-src
使用说明: angularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像
<img ng-src="{{ imgsrc }}" />
c.ng-disabled
使用说明: 使用ng-disabled可以把disabled属性绑定到以下表单输入字段上:
<input> (text、checkbox、radio、number、url, email、submit)
<textarea>
<select>
<button>
<textarea ng-disabled="isDisabled"></textarea>
d.ng-readonly
使用说明: 通过ng-readonly可以将某个返回真或假的表达式同是否出现readonly属性进行绑定
<input type="text" ng-readonly="someProperty" />
e.ng-checked
使用说明: 通过ng-checked可以将某个返回真或假的表达式同是否出现checked属性进行绑定
<input type="checkbox" ng-checked="someProperty" />
f.ng-selected
使用说明: ng-selected可以对是否出现option标签的selected属性进行绑定
<select>
<option>加入黑名单</option>
<option ng-selected="currentID == 2">取消黑名单</option>
</select>
g.ng-class
使用说明: ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。
当表达式发生变化,先前添加的类会被移除,新类会被添加
<div ng-class="{error : iserror}"></div>
<div ng-class="{success : hasValue, error : !hasValue}"></div>
h.ng-style
使用说明: ng-style帮你轻松控制你的css属性
<div ng-style="{coloe : 'red'}"></div>
<div ng-style="style"></div>
$scope.style = {color:'red',cursor:'pointer'};
i.ng-show/ng-hide
使用说明: ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏。
类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏
<div ng-show="2+2==6"></div>
<div ng-hide="2+2==4"></div>
j.ng-repeat
使用说明: ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素 都会被赋予自己的模板和作用域。
同时每个模板实例的作用域中都会暴露一些特殊的属性
$index:遍历的进度(0...length-1)
$first:当元素是遍历的第一个时值为true
$middle:当元素处于第一个和最后元素之间时值为true
$last:当元素是遍历的最后一个时值为true
$even:当$index值是偶数时值为true
$odd:当$index值是奇数时值为true
下面的例子展示了如何用$odd和$even来制作相间的列表，JavaScript中数组 的索引从0开始,
因此我们用!$even和!$odd来将$even和$odd的布尔值反转：<ul ng-controller="PeopleController">
<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
{{person.name}} lives in {{person.city}}
</li>
</ul>
angular.module('freefedApp',[]).controller('PeopleController',function($scope) {
$scope.people = [
{name: "Ari", city: "San Francisco"},
{name: "Erik", city: "Seattle"}
];
});
k.ng-init
使用说明: ng-init指令用来在指令被调用时设置内部作用域的初始状态
<div ng-init="greeting='Hello';person='World'"> {{greeting}} {{person}}</div>
l.ng-if
使用说明: ng-if指令用来根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if 的表达式的值是false,那对应的元素将会从DOM中移除,
否则对应元素的一个克隆将被重新插入DOM
<div ng-if="2+2===5">我将不会出现</div>
<div ng-if="2+2===4">你可以看到我</div>
m.ng-bind
使用说明: 尽管可以在视图中使用{{ }}模板语法(angularJS内置的方式),我们也可以通过ng-bind 指令实现同样的行为;
HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁,我可以用ng-bind将内容同元素绑定在一起避免未渲染内容闪烁,
内容会被当作子文本节点渲染到含有ng-bind指令的元素内
<div ng-if="2+2===5">我将不会出现</div>
<div ng-if="2+2===4">你可以看到我</div>
n.ng-bind-template
使用说明: 同ng-bind指令类似,ng-bind-template用来在视图中绑定多个表达式
<div ng-bind-template="{{message}}{{name}}"></div>
o.ng-cloak
使用说明: 除使用ng-bind来避免未渲染元素闪烁,还可以在含有{{ }}的元素上使用ng-cloak指令
<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
</body>
p.ng-model
使用说明: ng-model指令用来将input、select、text area或自定义表单控件同包含它们的作用域中 的属性进行绑定
<input type="text" ng-model="modelName.someProperty" />
q.ng-click
使用说明: ng-click指令用来指定一个元素被点击时调用的方法或表达式<div ng-controller="counterCtrl">
<button ng-click="count = count + 1" ng-init="count=0">点我递加</button>
<span> count: {{ count }}</span>
<button ng-click="decrement()">点我递减</button>
<div>
angular.module('freefedApp',[]).controller('counterCtrl',['$scope', function($scope) {
$scope.decrement = function() {
$scope.count = $scope.count - 1;
};
}])；
r.ng-change
使用说明: ng-change指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入,这个指令要 和ngModel联合起来使用<div ng-controller="equationCtrl">
<input type="text" ng-model="equation.x" ng-change="change()" />
<div>{{ equation.output }}</div>
</div>
angular.module('freefedApp',[]) .controller('equationCtrl',['$scope',function($scope) {
$scope.equation = {};
$scope.change = function() {
$scope.equation.output = parseInt($scope.equation.x) + 2;
};
]});
s.ng-submit
使用说明: ng-model指令用来将表达式同onsubmit事件进行绑定
<form ng-submit="submit()" ng-controller="formCtrl">
Enter text and hit enter:
<input type="text" ng-model="person.name" name="person.name" />
<input type="submit" value="提交" />
</form>
angular.module('freefedApp',[]).controller('formCtrl',['$scope',function($scope) {
$scope.person = {
name: null
};
$scope.people = [];
$scope.submit = function() {
if( $scope.name ){ }
};
]});
t.ng-include
使用说明: ng-include指令可以加载、编译并包含外部html片段到当前应用中来user.html
<span>姓名： {{user.name}}</span>
<span>年龄: {{user.age}}</span> <div ng-include=" 'user.html' " ng-controller="userCtrl"></div> angular.module('freefedApp',[]).controller('userCtrl',['$scope',function($scope) {
$scope.user = {
name: 'zhangzhen',
age : '26'
};
]});
angularJS内置指令一览的更多相关文章
- AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单 ...
- AngularJs -- 内置指令
AngularJS提供了一系列内置指令.其中一些指令重载了原生的HTML元素,比如<form>和<a>标签, 当在HTML中使用标签时,并不一定能明确看出是否在使用指令. 其他 ...
- angularjs内置指令 - form
form类 angular js对form表单进行了那些扩展 ①html原生form表单不允许嵌套,而angular封装之后的form可以进行嵌套 ②angular为form扩展了自动校验,和防止重复 ...
- angularJs内置指令63个
- Angular内置指令
记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
- AngularJS学习笔记（四）内置指令
说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素 ...
- 浅谈Angularjs至Angular2后内置指令的变化
一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...
- angular指令（二）--内置指令
一.基础ng 属性指令: ng-href ng-src ng-disabled ng-checked ng-readonly ng-selected ng-class ng-styl ...
随机推荐
- HDU 4612 Warm up(手动扩栈，求树上哪两个点的距离最远)
题目大意: 给你一个无向图,问加一条边之后最少还剩下几座桥. (注意重边处理) 分析:其实当我们把边双连通分量给求出来之后我们就能将连通块求出来,这样我们就可以重新构图.重新构造出来的图肯定是一颗 ...
- HDU 1495 非常可乐 BFS 搜索
http://acm.hdu.edu.cn/showproblem.php?pid=1495 题目就不说了, 说说思路! 倒可乐 无非有6种情况: 1. S 向 M 倒 2. S 向 N 倒 3. N ...
- 字符串（广义后缀自动机）：BZOJ 3926 [Zjoi2015]诸神眷顾的幻想乡
3926: [Zjoi2015]诸神眷顾的幻想乡 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 843 Solved: 510[Submit][St ...
- 搜索(DLX)： POJ 3074 3076 Sudoku
POJ 3074 : Description In the game of Sudoku, you are given a large 9 × 9 grid divided into smaller ...
- Android开发必知--自定义Toast提示
开发过Android的童鞋都会遇到一个问题,就是在打印Toast提示时,如果短时间内触发多个提示,就会造成Toast不停的重复出现,直到被触发的Toast全部显示完为止.这虽然不是什么大毛病,但在用户 ...
- poj3294 Life Forms（后缀数组）
[题目链接] http://poj.org/problem?id=3294 [题意] 多个字符串求出现超过R次的最长公共子串. [思路] 二分+划分height,判定一个组中是否包含不小于R个不同字符 ...
- 控制uwsgi 的信号量
最近在用nginx+uwsgi+djano搭建一个网站,当.py文件修改后,如果不重启uwsgi,修改无法应用. 查了下uwsgi的相关文档 ,找到几个解决方案.顺便翻译下以备查看 启动服务 Star ...
- Selenium firefox 版本问题
问题:Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms 原因: selenium-server-standalone-x. ...
- msyql 字节问题
MySQL 数据库的varchar类型在4.1以下的版本中的最大长度限制为255,其数据范围可以是0~255或1~255(根据不同版本数据库来定).在 MySQL5.0以上的版本中,varchar数据 ...
- 性能比较工具runstats
runstats能对做同一件事的两个不同方法进行比较,得出谁好一点.我们只需要提供两个不同方法,余下的事情都由runstats负责.runstats只是测量3个要素: 1. 耗用的时间. 2. 系统统 ...