点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

AngularJs与Angular常用的指令写法的区别

来源：懂视网责编：小采时间：2020-11-27 19:33:58

AngularJs与Angular常用的指令写法的区别

AngularJs与Angular常用的指令写法的区别:这篇文章主要介绍了关于AngularJs与Angular 常用的指令写法的区别，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一：angularjs指令1.ng-bind使用给定的变量或表达式的值来替换 HTML 元素的内容<p ng-bind="{{

推荐度：

点击下载本文 文档为doc格式

导读AngularJs与Angular常用的指令写法的区别:这篇文章主要介绍了关于AngularJs与Angular 常用的指令写法的区别，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一：angularjs指令1.ng-bind使用给定的变量或表达式的值来替换 HTML 元素的内容<p ng-bind="{{

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 类。

//写法一
<p ng-class="home"></p>

//写法二
<p ng-class="{'red':flag,'green':'!flag'}"></p>
//flag为true则添加red类名，false则添加green类名

5.ng-click

<button ng-click="addpay($event)">OK</button>
//$event为当前元素的多种属性

6.ng-repeat

<p ng-repeat="(index,item) in list"></p>
// 每项值：{{item}}
// 下标：{{index}}

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 元素的值

详情参考：http://www.runoob.com/angular...

二：angular指令

imageUrl 属性：

<img [src]="imageUrl">

[disabled]当组件为 isUnchanged( 未改变 ) 时禁用一个按钮：

<button [disabled]="isUnchanged">按钮是禁用的</button>

设置指令的属性：

<p [ngClass]="classes">[ngClass]绑定到classes 属性</p>

表格的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

<p *ngIf="currentUser">Hello,{{currentUser.firstName}}</p>

NgFor

<p *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</p>

（click）

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

[(checked)]

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

common

 NgClass
 NgComponentOutlet
 NgForOf
 NgIf
 NgPlural
 NgPluralCase
 NgStyle
 NgSwitch
 NgSwitchCase
 NgSwitchDefault
 NgTemplateOutlet

forms

 CheckboxControlValueAccessor
 CheckboxRequiredValidator
 DefaultValueAccessor
 EmailValidator
 FormArrayName
 FormControlDirective
 FormControlName
 FormGroupDirective
 FormGroupName
 MaxLengthValidator
 MinLengthValidator
 NgControlStatus
 NgControlStatusGroup
 NgForm
 NgModel
 NgModelGroup
 NgSelectOption
 PatternValidator
 RadioControlValueAccessor
 RequiredValidator
 SelectControlValueAccessor
 SelectMultipleControlValueAccessor

router

 RouterLink
 RouterLinkActive
 RouterLinkWithHref
 RouterOutlet

详情参考：https://angular.io/api/

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

AngularJs与Angular常用的指令写法的区别

推荐度：

点击下载本文 文档为doc格式

标签：区别写法常用的

热门焦点

AngularJs与Angular常用的指令写法的区别

AngularJs与Angular常用的指令写法的区别

AngularJs与Angular常用的指令写法的区别

最新推荐

猜你喜欢

热门推荐