您好,欢迎访问一九零五行业门户网

angularjs和angular指令写法的区别有哪些?AngularJs与Angular常用的指令写法区别的介绍

本篇文章主要的向大家介绍了关于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 类。
//写法一<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 元素的值
想看更多推荐到angularjs学习手册中学习。
二: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
好了,以上就是本篇文章的全部内容了(想看更多就到angularjs学习手册中学习),有问题的可以在下方留言提问
以上就是angularjs和angular指令写法的区别有哪些?angularjs与angular常用的指令写法区别的介绍的详细内容。
其它类似信息

推荐信息