實在是不能對jquery的ajax方法和基於頁面dom的各類取值、傳值方法滿意(雖然jquery已經解救過我一次了),恰好手上這個項目用jquery的方法寫了一半,決定試試好久之前自學的angularJS,把如今項目中jquery得部分用angularJS重寫一遍。html
寫的時候碰到不少問題,由於剛開始用,寫法思路仍是和寫jquery類似,致使與在一個生成select option下拉框時花費了2個小時才最終搞定。jquery
普通html select option, 須要該字段名稱name
,選線id
,選項label
ajax
<select name="data" id="data_select"> <option value="id1">a</option> <option value="id2">b</option> <option value="id3">c</option> </select>
jquery的取選項得作法dom
select_id = $("#data_select option:selected").val();
angularJS在select下使用ng-option
標籤生成選項實例google
<select class="form-control" ng-model="bubble_inputs.y" ng-options="y.name for y in basic_data.frameworks_y" >
生成的html dom以下:code
<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?orm
<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裏的結果:htm
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
根本不在須要什麼value=‘id’,只要把model的object從接口中取出來,放在html頁面上,、選中的option
的所有數據angularJS自動就幫我取到controller中得點擊事件中去了。接口