使用 js 选择选择框（通过 angularjs 填充选择框）答案

【问题标题】：selecting select box using js(select box populated through angularjs)使用 js 选择选择框（通过 angularjs 填充选择框）
【发布时间】：2015-07-02 14:11:39
【问题描述】：

我很难选择在 angularJS 的帮助下生成的选择框，谁能告诉我我做错了什么或建议一些代码来让它正确-

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

正如你可以看到脚本标签之间有很多注释代码并响应更改功能，这里我通过 GET 获取 jsp 中的值。我能够正确获得这些值。问题是使选择框被选择为某些值，我尝试了一些您可以在同一个脚本标签中看到的代码。

【问题讨论】：

标签： javascript php jquery angularjs drop-down-menu

【解决方案1】：

我从未在选项上使用ngRepeat 获得过太多成功。 Angular 已内置支持生成 options 的 select 元素。查看他们的 ngOptions 文档。

ngOptions Documentation

你的例子是：

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

那么在您的controller 中您应该可以访问

selectProgram.progname

获取选定的名称

编辑

到filter 你的options 你可以像这样在ng-options 里面添加：

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

看看这个answer

【讨论】：

在您给出的示例中，我如何使用 filterby 选项。
并且还使用唯一的作为程序中的值被重复，以及我如何在控制器中使用 selectProgram.progname 就像我在 getvariable(progname) 的控制器中导入值然后我比较它selectProgam.progname 那么我该如何选择它。
您可以像访问模型一样访问控制器中的值。 ngModel 将通过设置您告诉它的模型的选定值。在您的示例中，您将模型设置为 selectProgram。查看过滤器的编辑
你有可以学习 ng-option 的链接吗，在 google 上很难找到有用的链接
ngOptions 的角度文档的答案中有一个链接。点击 ngOptions 文档

【解决方案2】：

根据我的经验，对于具有动态值的选择，使用 ng-repeat 并不总是像预期的那样工作。试试这个，然后像往常一样简单地更改 ng-model 变量来更改 select 的选项。

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

编辑：您可以像在 ng-repeat 中一样使用过滤器，如 here 所示

【讨论】：