iT邦幫忙

DAY 9
6

入門AngularJS筆記與前端領域的學習筆記分享系列 第 9

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options

ng-options是什麼?

HTML SELECT事件有一個ng-options參數,

ng-options透過ng-model 綁定,用來顯示下拉選單。

介紹HTML SELECT事件如何在angularJS中應用。

Demo:

http://jsbin.com/oQEnaKE/1/
ng-options如何使用?

<select ng-model="Select1" ng-options="lottery.ProductName for lottery in lotteryModel">
    <option value="">-- 請選擇 --</option>
</select>
  1. 一定要使用ng-model去data-bind

    ng-model="Select1"

  2. label for value in array

    ng-options="lottery.ProductName for lottery in lotteryModel">

  3. 可以透過{{ Select1.ProductName }} 把選到的值呼叫出來

完整的Demo:

http://jsbin.com/oQEnaKE/1/edit

從原始碼可以看見,此範例有預設值。

<option value="">-- 請選擇 --</option>

如果只是單純的select,沒有預設值,預設會出現空的select名稱。

可參考:

http://jsbin.com/EmErosa/1/edit

加了預設值
<option value="">-- 請選擇 --</option>
才出現內容。

但若我們如果希望預設選擇是原本array的內容,該怎麼做呢?

可以參考:

http://jsfiddle.net/MTfRD/3/

來源:

http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select

另外保哥這篇文章,將ng-option的基本與進階用法寫得非常清楚

http://blog.miniasp.com/post/2013/05/12/AngularJS-ng-module-select-ngOptions-usage-samples.aspx

將靜態的select內容,存入自訂變數中。
http://jsbin.com/UdezUqI/2/edit

靜態與動態的select用法比較:
http://jsbin.com/ugUlaBO/4/edit

官方資料 http://docs.angularjs.org/api/ng.directive:select

其他demo-
http://jsfiddle.net/EZbfM/

參考來源-
http://stackoverflow.com/questions/12804163/binding-ng-show-to-a-select-option-in-angularjs

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

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


上一篇
Day8- 入門AngularJS筆記-AngularJS指令(7): input
下一篇
Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
系列文
入門AngularJS筆記與前端領域的學習筆記分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
jiro9611
iT邦新手 5 級 ‧ 2014-08-15 10:05:07

http://jsbin.com/kemivu/2/edit

大大我照你的方式自己,練習,叫出id裡面的number,但是它卻沒辦法像productname一樣,在選單下方顯示出結果<p>{{}}</p>我應該沒有打錯吧!?....難道數字不會顯示?

你沒加

沒加</select>
因為回應會吃html tag
所以我又回應了一次
並且用全形

我要留言

立即登入留言