angular与angularjs常用指令的不同写法整理
angularjs与angular 常用的指令写法的区别;
一:angularjs指令
1.ng-bind
使用给定的变量或表达式的值来替换 HTML 元素的内容
<p ng-bind="{{text}}"></p>
2.ng-blur
HTML 元素在失去焦点时需要执行的函数(<a>, <input>, <select>, <textarea>,支持)
<input ng-blur="pay()" />
3.ng-checked,ng-disabled
ng-checked:设置复选框(checkbox)或单选按钮(radio)的 checked 属性;
ng-disabled:表达式返回 true 则表单字段将被禁用。(input, select, 或 textarea)
<input type="checkbox|radio" ng-checked="flag" ng-disabled="flag"></input>
//flag为布尔类型
4.ng-class
给 HTML 元素动态绑定一个或多个 CSS 类。
//写法一
<div ng-class="home"></div>
//写法二
<div ng-class="{'red':flag,'green':'!flag'}"></div>
//flag为true则添加red类名,false则添加green类名
5.ng-click
<button ng-click="addpay($event)">OK</button>
//$event为当前元素的多种属性
6.ng-repeat
<div ng-repeat="(index,item) in list">
每项值:{{item}}
下标:{{index}}
</div>
ng-app | 定义应用程序的根元素。 |
ng-bind | 绑定 HTML 元素到应用程序数据 |
ng-bind-html | 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 |
ng-bind-template | 规定要使用模板替换的文本内容 |
ng-blur | 规定 blur 事件的行为 |
ng-change | 规定在内容改变时要执行的表达式 |
ng-checked | 规定元素是否被选中 |
ng-class | 指定 HTML 元素使用的 CSS 类 |
ng-class-even | 类似 ng-class,但只在偶数行起作用 |
ng-class-odd | 类似 ng-class,但只在奇数行起作用 |
ng-click | 定义元素被点击时的行为 |
ng-cloak | 在应用正要加载时防止其闪烁 |
ng-controller | 定义应用的控制器对象 |
ng-copy | 规定拷贝事件的行为 |
ng-csp | 修改内容的安全策略 |
ng-cut | 规定剪切事件的行为 |
ng-dblclick | 规定双击事件的行为 |
ng-disabled | 规定一个元素是否被禁用 |
ng-focus | 规定聚焦事件的行为 |
ng-form | 指定 HTML 表单继承控制器表单 |
ng-hide | 隐藏或显示 HTML 元素 |
ng-href | 为 the <a> 元素指定链接 |
ng-if | 如果条件为 false 移除 HTML 元素 |
ng-include | 在应用中包含 HTML 文件 |
ng-init | 定义应用的初始化值 |
ng-jq | 定义应用必须使用到的库,如:jQuery |
ng-keydown | 规定按下按键事件的行为 |
ng-keypress | 规定按下按键事件的行为 |
ng-keyup | 规定松开按键事件的行为 |
ng-list | 将文本转换为列表 (数组) |
ng-model | 绑定 HTML 控制器的值到应用数据 |
ng-model-options | 规定如何更新模型 |
ng-mousedown | 规定按下鼠标按键时的行为 |
ng-mouseenter | 规定鼠标指针穿过元素时的行为 |
ng-mouseleave | 规定鼠标指针离开元素时的行为 |
ng-mousemove | 规定鼠标指针在指定的元素中移动时的行为 |
ng-mouseover | 规定鼠标指针位于元素上方时的行为 |
ng-mouseup | 规定当在元素上松开鼠标按钮时的行为 |
ng-non-bindable | 规定元素或子元素不能绑定数据 |
ng-open | 指定元素的 open 属性 |
ng-options | 在 <select> 列表中指定 <options> |
ng-paste | 规定粘贴事件的行为 |
ng-pluralize | 根据本地化规则显示信息 |
ng-readonly | 指定元素的 readonly 属性 |
ng-repeat | 定义集合中每项数据的模板 |
ng-selected | 指定元素的 selected 属性 |
ng-show | 显示或隐藏 HTML 元素 |
ng-src | 指定 <img> 元素的 src 属性 |
ng-srcset | 指定 <img> 元素的 srcset 属性 |
ng-style | 指定元素的 style 属性 |
ng-submit | 规定 onsubmit 事件发生时执行的表达式 |
ng-switch | 规定显示或隐藏子元素的条件 |
ng-transclude | 规定填充的目标位置 |
ng-value | 规定 input 元素的值 |
二:angular指令
imageUrl 属性上:
<img [src]="imageUrl">
[disabled]当组件为 isUnchanged( 未改变 ) 时禁用一个按钮:
<button [disabled]="isUnchanged">按钮是禁用的</button>
设置指令的属性:
<div [ngClass]="classes">[ngClass]绑定到classes 属性</div>
表格的colspan/rowspan
<table border=>
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
<tr><td>Five</td><td>Six</td></tr>
</table>
[(NgModel)]
<input [(ngModel)]="currentUser.firstName">
NgIf
<div *ngIf="currentUser">Hello,{{currentUser.firstName}}</div>
NgFor
<div *ngFor="let user of users; let i=index">{{i + }} - {{user.fullName}}</div>
(click)
<button type="submit" class="btn btn-primary" (click)="hide()">确定</button>
<input type="checkbox" [(checked)]="checkflag">
common
forms
- CheckboxControlValueAccessor
- CheckboxRequiredValidator
- DefaultValueAccessor
- EmailValidator
- FormArrayName
- FormControlDirective
- FormControlName
- FormGroupDirective
- FormGroupName
- MaxLengthValidator
- MinLengthValidator
- NgControlStatus
- NgControlStatusGroup
- NgForm
- NgModel
- NgModelGroup
- NgSelectOption
- PatternValidator
- RadioControlValueAccessor
- RequiredValidator
- SelectControlValueAccessor
- SelectMultipleControlValueAccessor
angular与angularjs常用指令的不同写法整理的更多相关文章
- [AngularJS] 常用指令
常用指令 ng-hide指令,用于控制部分HTML元素可见(ng-hide="false")和不可见状态(ng-hide="true"),如下: <div ...
- AngularJS常用指令
一.指令 1.ng-app 定义应用程序的根元素 <div ng-app="app"></div> var app = angular.module('ap ...
- AngularJs 常用指令标签
1.ng-app:告诉Angular他应该管理页面的那一部分,可以放在html元素上也可以放在div等标签上 例:<html ng-app="problem"> 2.n ...
- Angular CLI ng常用指令整理
一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...
- AngularJS常用指令用法详解
ng-class 1>ng-init ng-bind 11111 2>ng-class 111 3>ng-repeat 3.1-数据绑定 ng-repeat可以绑定数组和 ...
- Angular JS从入门基础 mvc三层架构 常用指令
Angular JS从入门基础 mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
- angularjs的几种常见写法
学习angularjs不久,遇见的angularjs的写法也是很多的感觉,今天就在这里记录一下,还有没见过的,继续学习中... angularjs 常用的几种种写法 1.链式: angular.mod ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- AngularJS常用插件与指令收集
angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...
随机推荐
- 0x20 搜索
这里基本就是入门吧. 可达性统计 用bitset搞的判重,发现这东西是真好用哈,空间还小 #include<cstdio> #include<iostream> #includ ...
- DNS隧道之DNS2TCP实现——dns2tcpc必须带server IP才可以,此外ssh可以穿过墙的,设置代理上网
我自己的命令: server端: dns2tcpd -F -d 1 -f ./dns2tcpd.conf 输出: 09:08:59 : Debug options.c:97 Add resource ...
- 【POJ 2828】Buy Tickets
[题目链接] http://poj.org/problem?id=2828 [算法] 离线用线段树维护序列即可 [代码] #include <algorithm> #include < ...
- 队列(FIFO)详解
写在前面的话: 一枚自学Java和算法的工科妹子. 算法学习书目:算法(第四版) Robert Sedgewick 算法视频教程:Coursera Algorithms Part1&2 本文 ...
- flask-alembic数据迁移工具
alembic是用来做ORM模型与数据库的迁移与映射.alembic使用方式跟git有点类似,表现在两个方面, 第一,alemibi的所有命令都是以alembic开头: 第二,alembic的迁移文件 ...
- sqlserver数据文件位置如何迁移
亲测有效的一种方式: 1.对应的数据库脱机 2.迁移物理文件 3.删除原有实例 4.附加
- redis简单的事务
Redis与 mysql事务的对比 占位 Mysql Redis 开启 start transaction muitl 语句 普通sql 普通命令 失败 rollback 回滚 discard 取消 ...
- WPF常用资源
Textbox error template<Style x:Key="ControlBaseStyle" TargetType="{x:Type Control} ...
- struts2学习之基础笔记8
文件的上传和下载 上传 步骤1:在文件上传表单中设置method和enctype属性值 格式:<s:form method=”post” enctype =”multipart/ form.da ...
- 前端学习笔记-CSS