angular指令總結

ng-list

ng-non-bindable

ng-switch

ng-readonly

ng-include

ng-template

angular中有一些不常用，但卻非常有用的指令，如果在開發過程中可以直接使用這些指令，會大大地加快我們的開發效率。

ng-class 指令用於給 html 元素動態繫結乙個或多個 css 類。

ng-class 指令的值可以是字串，物件，或乙個陣列。

.red

.fsz26
.bgc
class
="red fsz26 bgc"
>***<
/div>2.用法二：陣列
當值為乙個陣列時，它每個字串元素都會被加到class中
.red
.fsz26
.bgc
class
="[red,fsz26,bgc]"
>***<
/div>3.用法三：物件
當值為乙個物件時(key=>value)，把value為true的key加到class中
$scope.isselected=
true
;

.red

.green
class
="[isselected]"
>***<
/div>
"checkbox" ng-model=
"isselected"
>這種用法就是說isselected為true時，就給元素加上red這個class，如果isselected為false就加上green這個class，這個在邏輯比較簡單的時候還是蠻好用的。
下一種適合需要新增多個類的時候，也就是ng-class的值為乙個物件
$scope.isselected=
true
;$scope.iscar=
true
;

.red

.bgc
class=""
>***<
/div>
"checkbox" ng-model=
"isselected"
>
"checkbox" ng-model=
"iscar"
>ng-list 指令將輸入的字串轉換為陣列，並使用逗號分隔。
ng-list 指令還有另外一種轉換方式，可以將陣列轉化為字串並在輸入框中顯示。
ng-list 屬性值定義了分隔符。
1.用法一：將輸入的字串轉化為陣列：
請輸入使用者姓名
"text" ng-model=
"name_str" ng-list>
<
/div>
列印name_str的結果為：[mary,lisa,mike]
2.用法二：將陣列轉化為字串渲染在資料框裡：
語法：ng-list=「分隔符」
$scope.name_arr=
[[mary,lisa,mike]
;

請輸入使用者姓名
"text" ng-model=
"name_arr" ng-list=
",">
<
/div>
ng-non-bindable 指令用於當前的 html 元素或其子元素不需要 angularjs編譯。
}<
/div>顯示如下：
ng-switch 指令根據表示式顯示或隱藏對應的部分。
對應的子元素使用 ng-switch-when 指令，將匹配的html元素進行顯示，其他未匹配的html則移除。
可以通過使用 ng-switch-default 指令設定預設選項，如果都沒有匹配的情況，預設選項會顯示。
switch
="expression"
>
switch
-when=
"value"
>
<
/element>
switch
-when=
"value"
>
<
/element>
switch
-when=
"value"
>
<
/element>
switch
-default
>
<
/element>
<
/element>

如果 ng-readonly 屬性的表示式返回 true 則表單域為唯讀。

"text" ng-model=
"str1" ng-readonly=
"true"
>

1.用法一：傳入靜態文字

"'part.html'"
>
<
/div>2.用法二：傳入變數
語法：ng-list=「分隔符」
$scope.template=

"template.url"
>
<
/div>3.用法三：傳入函式
$scope.
geturl
=function()

"geturl()"
>
<
/div>4.用法四：作為標籤名使用
"'part.html'"
>
<
/div>
"'part.html'"
>
<
/ng-include>

用於將多個html片段存放於乙個html檔案中，並且可以根據需求分別呼叫其中的某乙個片段。

 
angular 指令總結
ng init 指令 ng init 指令為 angularjs 應用程式定義了 初始值。通常情況下，不使用 ng init。您將使用乙個控制器或模組來代替它。x ng model 指令 ng model 指令 繫結 html 元素 到應用程式資料。x ng model 指令也可以 為應用程式資料提...
Angular頁面指令
分為元件帶模板的指令，結構性指令改變宿主文件結構 ngif ngswitch ngfor 屬性性指令改變宿主行為 ngmodel ngstyle ngclass innerhtml 將value作為html標籤來解析 textcontent 將value作為文字解析 ngif ngif 如果vlau...
angular基礎 指令
指令 directive 可以理解為沒有模版的元件，它需要寄宿在乙個元素上 宿主 host 1.hostbinding 繫結宿主的屬性或樣式 import from angular core directive export class griditemdirective 2.hostlistene...