ng-style是什麼?

ng-style是使用angular來直接設定css樣式的指令

基本範例:
http://jsbin.com/aGExOfa/1/edit

改寫網路範例:
http://jsbin.com/oKohAba/2/edit
一般我們要在HTML直接設定CSS樣式，我們可以使用下列語法。

<p style="color:blue">Anna</p>

那麼ng-style怎麼用?

此範例是將文字設定為藍色，基本的用法是:

1. 在欲執行的標籤內，加入ng-style指令，範例中是執行一個名稱為set_color的方法。

HTML:

<p ng-style="set_color()">Anna</p>

2. 觸發function之後，回傳一個object，裡面放你要設定的CSS樣式。

JS:

$scope.set_color = function (){
      return { color: "blue" };
  };

此完整範例比對style和ng-style的用法差異:
http://jsbin.com/aGExOfa/1/edit

另外官方範例是點擊按鈕之後，再設定樣式。

用法如下:

1. 在按鈕上加上ng-click點擊事件，增加一個model變數，裡面存入object，指定樣式內容>

2. 在欲顯示的標籤上，綁定剛剛的model名稱，實現樣式設定。
   Sample Text

3. 也可以將object清空

補充進階範例:
判斷資料條件後，傳回樣式的內容。
http://jsbin.com/oKohAba/2/edit

官方文件:
http://docs.angularjs.org/api/ng.directive:ngStyle

本次參考範例:
http://stackoverflow.com/questions/16111994/using-angularjs-ng-style-within-ng-repeat-iteration

進階範例:
http://stackoverflow.com/questions/15573413/angular-updating-a-css-style-globally-with-variable-in-scope

http://stackoverflow.com/questions/15573413/angular-updating-a-css-style-globally-with-variable-in-scope

http://jsfiddle.net/mrajcok/eTTZj/

http://abgne.tw/angularjs/angularjs-getting-stared/ngstyle.html

官方範例:
http://jsfiddle.net/api/post/library/pure/

---------------入門AngularJS筆記---------------

Day30- 入門AngularJS筆記-directive
http://ithelp.ithome.com.tw/question/10140689

Day29- 入門AngularJS筆記-filter
http://ithelp.ithome.com.tw/question/10140497

Day28- 入門AngularJS筆記-AngularJS指令(24): ng-mouseover
http://ithelp.ithome.com.tw/question/10140351

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196