實在是不能對jquery的ajax方法和基於頁面dom的各種取值、傳值方法滿意(雖然jquery已經解救過我一次了),剛好手上這個專案用jquery的方法寫了一半,決定試試很久以前自學的angularJS,把現在專案中jquery得部分用angularJS重寫一遍。
寫的時候碰到很多問題,因為剛開始用,寫法思路還是和寫jquery相似,導致與在一個生成select option下拉框時花費了2個小時才最終搞定。
普通html select option, 需要該欄位名稱name
,選線id
,選項label
<select name="data" id="data_select">
<option value="id1">a</option>
<option value="id2">b</option>
<option value="id3">c</option>
</select>
jquery的取選項得做法
select_id = $("#data_select option:selected").val();
jqueryde的思路大概是上面這樣的,但是使用了angularJS後,著實讓我迷惑了
angularJS在select下使用ng-option
標籤生成選項例項
<select class="form-control"
ng-model="bubble_inputs.y"
ng-options="y.name for y in basic_data.frameworks_y"
>
生成的html dom如下:
<select class="form-control ng-valid ng-dirty"
ng-model="bubble_inputs.x"
ng-options="x.name for x in basic_data.frameworks_x"
>
<option value="0">x1</option>
<option value="1">x2</option>
<option value="2">x3</option>
<option value="3">x4</option>
...
</select>
看見這個輸出,我發現沒法把id
寫在option > value
上
這豈不是無法獲取選項資訊了?這不行,萬萬不行 。結果開始了長時間的google,還是沒有解決辦法,就只能生成這種只有label的option,這咋辦呢?難道要用ng-repeat
生成option?
<select class="form-control" name="y_id" id="type_y">
<option ng-repeat="framework_y in basic_data.frameworks_y" value="{{framework_y.id}}">
{{framework_y.name}}
</option>
</select>
我甚至開始這麼嘗試了,但是我的理智戰勝了偷懶的邪念,決定通過ng-click
取model裡的值看一看,結果console.log
出來一看,發現自己一個多小時都傻x了。看看console裡的結果:
Object {bubble_name: "ab", bubble_description: "b", x: Object, y: Object, series: Object}
bubble_description: "b"
bubble_name: "ab"
series: Object
x: Object
y: Object
date: "2014-03-11 09:03:22"
description: ""
disable_flag: "1"
id: "9"
name: "y3"
position: "1"
team_id: "8"
type: "y"
__proto__: Object
__proto__: Object
angularJS根據model的名稱早就把每個相關的input的值自動放在Object中了
根本不在需要什麼value=‘id’,只要把model的object從介面中取出來,放在html頁面上,、選中的option
的全部資料angularJS自動就幫我取到controller中得點選事件中去了。