灵魂筹码和探灵笔记:AngularJs中用到的相關指令總結

閱讀() @2019-05-12 11:46:36

探灵笔记小皮图片 www.xpacu.icu AngularJs中用到的相關指令總結(陸續更新中):

1、ng-app指令:

告訴 AngularJS 應用當前這個元素是根元素。所有AngularJS應用都必須要要一個根元素。HTML文檔中只允許有一個ng-app指令,如果有多個 ng-app 指令,則只有第一個會被使用,它的值是指定載應用??櫚拿?。

2、ng-controller指令:

用于為你的應用添加控制器。在控制器中,你可以編寫代碼,制作函數和變量,并使用scope對象來訪問。

3、ng-model指令:

綁定了HTML表單元素到scope變量中。如果scope中不存在變量, 將會創建它。一般是用在input表單中改變value值用做雙向數據綁定。

4、ng-bind指令:

告訴AngularJS使用給定的變量或表達式的值來替換HTML元素的內容。如果給定的變量或表達式修改了,指定替換的HTML元素也會修改。

以上4個指令的初次使用場景: AngularJs簡介、指令、表達式及其作用。

5、ng-click指令:

告訴AngularJS,HTML元素被點擊后需要執行的操作。

實例:AngularJS中$scope的基本使用方法

6、ng-cloak指令:

用于在AngularJS應用在加載時防止AngularJS代碼未加載完而出現的問題。

AngularJS應用在加載時,文檔可能會由于AngularJS代碼未加載完而出現顯示AngularJS代碼,進而會有閃爍的效果,ng-cloak指令是為了防止該問題的發生。

實例:AngularJs表達式與ng-bind及ng-cloak解決閃屏問題解決方案。

7、ng-value指令:

用于設置input 或select元素的 value 屬性。

8、ng-show指令:

在表達式為true時顯示指定的HTML元素,否則隱藏指定的HTML元素。

9、ng-true-value和ng-false-value指令:

可以自定義checkbox被選中或取消選中之后的value值,ng-true-value表示選中之后的value值,ng-false-value表示取消選中之后的value值。

10、ng-options指令:

循環讀取scope對象中的json數據,將其逐條返回到select中的option。

實例:AngularJs中的雙向向數據綁定(MVVM)與表單處理相關指令

11、ng-selected指令:

用于設置 <select> 列表中的 <option> 元素的 selected 屬性。ng-selected 屬性的表達式返回 true 則選項被選中。

<!-- ng-selected 如果為true,則option被選中 -->
<select>
	<option>請選擇</option>
	<option ng-value="user.sex" ng-selected="user.sex==1">男</option>
	<option ng-value="user.sex" ng-selected="user.sex==2">女</option>
</select>
<input type="radio" name="sex" ng-model="user.sex" ng-value="1" />男
<input type="radio" name="sex" ng-model="user.sex" ng-value="2" />女
var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.user = {'sex':1};
	}]);

12、ng-disabled指令:

設置表單輸入字段的 disabled 屬性(input, select, 或 textarea)。如果 ng-disabled 中的表達式返回 true 則表單字段將被禁用。

<!-- ng-disabled 如果為true,則不可編輯且置灰 -->
<input type="checkbox" ng-model="copyright" />
<input type="submit" ng-disabled="!copyright" />

13、ng-readonly指令:

用于設置表單域(input 或 textarea) 的 readonly 屬性。如果 ng-readonly 屬性的表達式返回 true 則表單域為只讀。

<!-- ng-readonly 如果為true,則是只讀,不可編輯 -->
<input type="text" ng-readonly="user.sex" />
<input type="text" ng-disabled="user.sex" />

14、ng-model-options指令:

綁定了 HTML 表單元素到 scope 變量中,你可以指定綁定數據觸發的時間,或者指定等待多少毫秒。

實例:AngularJs使用ng-model-options設置數據同步時機提高網站性能

15、ng-checked指令:

用于設置復選框(checkbox)或單選按鈕(radio)的 checked 屬性。如果 ng-checked 屬性返回 true,復選框(checkbox)或單選按鈕(radio)將會被選中。

實例:AngularJs使用ng-checked一步實現全選或取消功能

16、ng-class指令:、

用于給 HTML 元素動態綁定一個或多個 CSS 類。ng-class 指令的值可以是字符串,對象,或一個數組。

如果是字符串,多個類名使用空格分隔;

如果是對象,需要使用 key-value 對,key 為你想要添加的類名,value 是一個布爾值。只有在 value 為 true 時類才會被添加;

如果是數組,可以由字符串或對象組合組成,數組的元素可以是字符串或對象。

實例:AngularJs通過ng-class動態改變樣式類實例操作

17、ng-style指令:

為 HTML 元素添加 style 屬性。ng-style 屬性值必須是對象,表達式返回的也是對象。對象由 CSS 屬性和值注冊,即 key=>value 對。

實例:AngularJS使用ng-style動態改變樣式

18、事件指令總結:

實例:AngularJs的事件處理指令詳解

持續更新中!

微信二維碼