angular常用內建指令

2022-08-17 09:06:20 字數 1219 閱讀 5837

指令名稱

描述用來定義模組的作用範圍

ng-controller

用來定義控制器的作用範圍

ng-repeat

迴圈遍歷陣列

ng-bind

繫結資料 同}

ng-show

用來顯示或隱藏元素 值為true / false ,原理是設定元素的display

ng-hide

用來顯示或隱藏元素 值為true / false 用法和ng-show相反,原理設定元素的display

ng-if

用來顯示或隱藏元素 和ng-show/ng-hide的不同點是它直接刪除元素

ng-cloak

用來解決「閃爍」的問題,原理是在angular還未執行的時候先讓元素display:none

ng-class

用來控制類名,使用方式:ng-class="" class對應的值只要轉為布林值為true就是顯示

ng-include

用來引用外部的模板檔案

ng-disabled

用來控制表單是否禁用,值為true/false

ng-src

用來引用的路徑 可以解決"閃爍"問題

ng-href

用來引用a鏈結的路徑 可以解決"閃爍"問題

ng-readyonly

用來控制表單是否唯讀,值為true/false

ng-checked

用來控制核取方塊選中,值為true/false

ng-selsected

用來控制下拉框選中,值為true/false

ng-init

初始化模型,就是$scope

ng-switch on

對資料進行篩選 值為$scope的屬性

ng-switch-when

對資料進行篩選 值為$scope的屬性值

ng-bind-templete

繫結多個資料 ng-bind-template="}}"

事件指令

描述ng-click

單擊事件

ng-dblclick

雙擊事件

ng-focus

獲得焦點事件

ng-blur

失去焦點事件

ng-mouseout

滑鼠離開事件

ng-mouseover

滑鼠經過事件

ng-submit

表單提交事件

Angular 常見內建指令

指令 就是擴充套件了html的基本功能,通過額外的標籤 屬性來增強html功能 angular的指令在頁面中體現出來就是乙個標籤 屬性 class名稱 注釋等等 常見指令,按照指令的功能,劃分為五大類 1.控制指令,用於angular應用程式載入流程控制 2.渲染指令,用於angular將資料在網頁...

Angular 4 0 內建指令

原文出處 在這篇文章中,我們將分別列舉每乙個內建指令的用法,並提供乙個例子作為演示。盡量用最少最簡單的描述,讓你在更快更準確地學會每一種內建指令的基本用法。作用 像 for 迴圈一樣,可以重複的從陣列中取值並顯示出來。例子 ts this.userinfo 張三 李四 王五 html 講解 他的語法...

angular的常用指令

因為ng bind 預設把html標籤轉義成字串。如果不想轉義。用這個指令。注意 當遍歷的時候,陣列有相同的值的時候,會報錯,用下面這種方法可以解決 track by ng repeat item in ccc track by index li name id ng model xx value ...