Angularjs: use ng option to generate a drop-down box and call it in the controller

Time:2022-1-15

You really can’t use jQueryAjax methodAnd based onVarious value taking and value transferring methods of page DOMSatisfied (although jQuery has saved me once), I just wrote half of the project in jQuery. I decided to try angularjs, which I taught myself a long time ago, and rewrite the part of jQuery in the current project in angularjs.

There are many problems when writing. At the beginning, the writing method is still similar to that of writing jQuery. As a result, it took 2 hours to finally get it done when generating a select option drop-down box.

This field name is required for normal HTML select optionname, line selectionid, optionslabel

<select name="data" id="data_select">
    <option value="id1">a</option>
    <option value="id2">b</option>
    <option value="id3">c</option>
</select>

How to get options from jquery

select_id = $("#data_select option:selected").val();

The idea of jqueryde is probably like the above, but after using angularjs, it really puzzles me

Angularjs is used under Selectng-optionLabel generation option instance

<select class="form-control"
    ng-model="bubble_inputs.y"
    ng-options="y.name for y in basic_data.frameworks_y"
>

The generated HTML DOM is as follows:

<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>

Seeing this output, I found it impossible toidWrite inoption > valueupper

Isn’t it impossible to get option information? No, No. As a result, Google started for a long time, but there is still no solution. It can only generate this option with only label. What should I do? Do you want to use itng-repeatGenerate 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>    

I even started to try, but my reason overcame the evil idea of laziness and decided to passng-clickTake the value in the model and see the resultconsole.logI came out and found myself stupid x for more than an hour. Look at the results in the 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 automatically puts the value of each relevant input in the object according to the name of the model

There’s no need for anything at allvalue=‘id’, just take the model object from the interface and put it on the HTML pageSelected optionAll the data of angularjs will automatically help me get to the click event in the controller.

Unconsciously thinking in a familiar way has paid a heavy price