首頁 > web前端 > js教程 > 主體

angularjs和angular指令寫法的差別有哪些? AngularJs與Angular常用的指令寫法區別的介紹

寻∝梦
發布: 2018-09-07 15:39:40
原創
1262 人瀏覽過
本篇文章主要的向大家介紹了關於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="{&#39;red&#39;:flag,&#39;green&#39;:&#39;!flag&#39;}"></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>

    # 元素指定連結

  • #<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-

  • ng-
  • ng-ng-ng-

  • ng-
  • ng-

  • ng-
  • ng-

  • ng-
  • ng-

  • mouseup    規定當在元素上放開滑鼠按鈕時的行為
  • ng-non-bindable    規定元素或子元素不能綁定資料
  • #ng-open    指定元素的open 屬性
  • ###ng-options    在###<select>### 清單中指定######### ##########ng-paste    規定貼上事件的行為############ng-pluralize    依照本地化規則顯示訊息############ #ng-readonly    指定元素的readonly 屬性############ng-repeat    定義集合中每項資料的範本############ng-selected    指定元素的範本#############ng-selected    指定元素的selected 屬性############ng-show    顯示或隱藏HTML 元素###
  • ng-src    指定 元素的 src 属性

  • ng-srcset    指定 元素的 srcset 属性

  • ng-style    指定元素的 style 属性

  • ng-submit    规定 onsubmit 事件发生时执行的表达式

  • ng-switch    规定显示或隐藏子元素的条件

  • ng-transclude    规定填充的目标位置

  • ng-value    规定 input 元素的值

想看更多推荐到PHP中文网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
    登入後複製

好了,以上就是本篇文章的全部内容了(想看更多就到PHP中文网angularjs学习手册中学习),有问题的可以在下方留言提问

以上是angularjs和angular指令寫法的差別有哪些? AngularJs與Angular常用的指令寫法區別的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板