CODEWITHSUNDEEP
javascriptphpjqueryangularjsdrop-down-menu
Saurabh Gupta
Saurabh Gupta

Reputation: 449

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

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.

Upvotes: 1

Views: 420

Answers (2)

dball
dball

Reputation: 374

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

Upvotes: 1

Loukas Avramidis
Loukas Avramidis

Reputation: 537

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

Upvotes: 1

Related Questions