​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=1>
  <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 + 1}} - {{user.fullName}}</div>


（click）


<button type="submit" class="btn btn-primary" (click)="hide()">确定</button>


[(checked)]  


<input type="checkbox"  [(checked)]="checkflag">




common



forms



router