selecting select box using js(select box populated through angularjs)

Question

I am having hard time selecting select boxes which were generated with the help of angularJS, can anyone tell me what am i doing wrong or suggest some code to get it right-

        <meta charset="utf-8">
        <title>Bughound: Update Bug</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
        <script src="javascripts/jquery-1.10.12.js"></script>
    </head>
    <div class="margin custom">
        <body bgcolor="#2e2e2e">
        <form method="POST" action="update_bug_db.php">
    <script type="text/javascript">
    function getURLParameter(name) {
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
    }
        $(document).ready(function () { 
        var progname = getURLParameter('prog_name');
        var prognumber = getURLParameter('prog_number');
        var progrelease = getURLParameter('prog_release');
    //myvar = getURLParameter('myvar');
    //  String progname = request.getParameter("prog_name");
    //  String prognumber = request.getParameter("prog_number");
    //  String progrelease = request.getParameter("prog_release");
        //$("#program_name").val(progname);
        $("#program_number").val(prognumber);
        $("#program_release").val(progrelease);
        //$("#report_type").val('Documentation');
        $("#program_name option[value=progname]").prop('selected', true);
        $("#report_type option[value='Documentation']").prop('selected', true);
    });
        </script>
            <div style="text-align: center; padding-top: 0px">
                <h1 style="color:white;font-size: 50px">Bughound</h1>
            </div>
            <?php
            require "db/db.php";
            $bugid = $_GET['bugid'];
            $sql = 'Select * from Bug where Bug_ID="' . $bugid . '"';
            $result = db($sql);
            $bug = $result->fetch_assoc();
            ?>

            <div class="effect8">
                <div class="tableMargin">
                    <table class="table" ng-app="myApp" ng-controller="customersCtrl">
                        <tr class="program_row">
                            <td class="td">Program</td>
                            <td class="td" style="padding-left: 2.7em">
                                <select class="dropdown" id="program_name" required ng-model="selectProgram" name="program">
                                    <option></option>
                                    <option ng-repeat="x in programes | unique: 'progname'" value=""{{x.progname}}"">{{ x.progname }}</option>
                                </select>
                            </td>
                            <td class="td" style="padding-left: 1em">Version</td>
                            <td class="td" style="padding-left: 0.8em">
                                <select class="dropdown" id="program_number" required ng-model="selectNumber" name="version">
                                    <option></option>
                                    <option
                                        ng-repeat="x in programes | filterBy: ['progname']:selectProgram | filterBy: ['progrelease']:selectRelease | unique: 'prognumber'"
                                        name="" {{x.prognumber}}"" value="" {{x.prognumber}}"">{{ x.prognumber }}</option>
                                </select>
                            </td>
                            <td class="td" style="padding-left: 1em">Release</td>
                            <td class="td">
                                <select class="dropdown" id="program_release" required ng-model="selectRelease"  name="release">
                                    <option></option>
                                    <option
                                        ng-repeat="x in programes | filterBy: ['progname']:selectProgram | filterBy: ['prognumber']:selectNumber | unique: 'progrelease'"
                                        name="" {{x.progrelease}}
                                    "">{{ x.progrelease }}</option>
                                </select>
                            </td>
                        </tr>
                    </table>

                    <script>
                        var app = angular.module('myApp', ['angular.filter']);
                        app.controller('customersCtrl', function ($scope, $http) {
                            $http.get("db/program_db.php")
                                .success(function (response) {
                                    $scope.programes = response.records;
                                });
                        });
                    </script>

                    </table>

As you can see the script tag in between with lots of comment code and which responds to change function, here i am getting the values in jsp through GET. I am able to get those values correctly. The problem is making the select box get selected to certain values, i have tried some code which you can see in the same script tag.

Community · Accepted Answer · 2017-05-23 11:43:51Z

1

I have never had too much success using ngRepeat on options. Angular has built in support for generating options of a select element. Have a look at their documentation for ngOptions.

ngOptions Documentation

An example for your case would be:

<select class="dropdown" id="program_name" required ng-model="selectProgram" name="program" ng-options="x.progname for x in programes track by x">
     <option value=""></option>   <----//Default option
</select>

Then in your controller you should have access to

selectProgram.progname

to get the selected name

EDIT

To filter your options you can add that inside of the ng-options like this:

<select class="dropdown" id="program_name" required ng-model="selectProgram" name="program" ng-options="x.progname for x in programes track by x | unique:'progname'">
     <option value=""></option>   <----//Default option
</select>

Check out this answer

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Jul 2, 2015 at 14:26

dball

3742 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Saurabh Gupta Over a year ago

in the example you are giving how do i use the filterby option.

Saurabh Gupta Over a year ago

and also use unique as the value in program are being repeated, and how do i use the selectProgram.progname in controller like if i import the values in controller of getvariable(progname) then i compare it to selectProgam.progname then how do i make it select.

dball Over a year ago

You can access the value in the controller the same way you access the model. ngModel will pass set the selected value of the model you are telling it to. In your example you set your model to selectProgram. See the edit for filter

Saurabh Gupta Over a year ago

do u have a link where i can learn ng-option, it is kind of hard to find useful link on google

dball Over a year ago

There is a link in the answer to the angular documentation on ngOptions. Click on ngOptions Documentation

Loukas Avramidis · Accepted Answer · 2015-07-02 14:41:23Z

1

In my experience, using ng-repeat doesn't always work as intended for a select with dynamic values. Try this, and simply change the ng-model variable to also change the select's option as you normally would.

<select ng-model="selected" ng-options="option.id as option.value for option in options | filter"></select>

Edit: You can use filters as you normally would in a ng-repeat as shown here

edited Jul 2, 2015 at 14:41

answered Jul 2, 2015 at 14:21

Loukas Avramidis

5374 gold badges10 silver badges24 bronze badges

Collectives™ on Stack Overflow

selecting select box using js(select box populated through angularjs)

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related