angular 學習筆記 2 ng指令

2022-08-13 19:00:18 字數 1073 閱讀 9867

今天介紹一些常用的ng指令吧。

一:ng-bind和ng-clock。

ng-bind:將data資料繫結到當前元素的 innerhtml,相當於初始化吧。

ng-clock:主要用來避免html模板顯示引起的不希望的閃爍效應,其實ng-bind也有同樣的效果。

解決閃爍問題還可以把引包放在head裡面,先載入angular.js。

1

34

114

1517

178

911 .controller('mycontroller',["$scope",function

($scope)18}

19}])

20

三:ng-class:通過資料繫結表達所有要新增的類的表示式來動態地設定html元素上的css類(輸入名字首字母新增類名,樣式變紅色)

267

9101314

1516

18 .controller('listcontroller', ['$scope', function

($scope) ]);

21

四:ng-show:顯示;

ng-hide:隱藏;

ng-if:是否存在

ng-swich:可以處理比較複雜的ng-class判斷。

121

3243

56switch="selected">

7switch-when="1">

8你選擇的是1910

switch-when="2">

11你選擇的是2

1213

switch-when="3">

14你選擇的是3

1516

switch-default>

17你什麼都沒選

1819

好了,今天就學到這裡,通過兩天的學習,深深的感受到ng在雙向資料繫結的方面的功能強大。體驗不錯!!!

angular學習筆記(6) 指令

angular1學習筆記 6 指令 restrict 匹配模式 1.a 屬性 2.m 注釋 3.e 元素 4.c 樣式類 注釋留空兩邊 推薦使用元素和屬性的方式使用指令 當需要建立帶有自己的模板的指令時,使用元素名稱的方式建立指令 當需要為已有的html標籤增加功能時,使用屬性的方式建立指令 sco...

angular2 學習筆記(三)

建立的angular2專案中,在src資料夾中 main.ts 固定以下 主要是為了啟動頁面 import from angular platform browser dynamic platformbrowserdynamic import from angular core import fro...

angular2 學習筆記 Pipes

更新 2019 09 01 number 和 currency pipe 當我們要出美美的數字的時候就會用到了。什麼叫美美 比如十萬,100000 or 100,000 哪個好一點 後的丫,有逗號隔開了密密的 0 這時候就要使用 number 了 最常用的是 number 0.2 4 意思是小數點前...