使用angularjs实现二级联动需要注意的问题如下

实在是不能对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中得点击事件中去了。

不自觉的用自己所熟悉的方式思考问题，付出了惨重的代价