AngularJS: 使用ng-option生成下拉框并在controller调用

实在是不能对jquery的ajax方法和基于页面dom的各类取值、传值方法满意(虽然jquery已经解救过我一次了),恰好手上这个项目用jquery的方法写了一半,决定试试好久之前自学的angularJS,把如今项目中jquery得部分用angularJS重写一遍。html

写的时候碰到不少问题,由于刚开始用,写法思路仍是和写jquery类似,致使与在一个生成select option下拉框时花费了2个小时才最终搞定。jquery

普通html select option, 须要该字段名称name,选线id,选项labelajax

<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();

jqueryde的思路大概是上面这样的,可是使用了angularJS后,着实让我迷惑了

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

angularJS根据model的名称早就把每一个相关的input的值自动放在Object中了

根本不在须要什么value=‘id’,只要把model的object从接口中取出来,放在html页面上,、选中的option的所有数据angularJS自动就帮我取到controller中得点击事件中去了。接口

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

相关文章
相关标签/搜索