selecting select 框使用 js（select 框通过 angularjs 填充）

Question

我很难 selecting select 在 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 中的值。我能够正确地获得这些值。问题是使 select 框得到 select 某些值，我已经尝试了一些代码，您可以在同一脚本标签中看到这些代码。

Answer 1

根据我的经验，对于具有动态值的 select，使用 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

Answer 2

我在选项上使用 ngRepeat 从来没有取得过太大的成功。 Angular 内置支持生成 select 元素的 options。查看 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

selecting select 框使用 js（select 框通过 angularjs 填充）

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

javascript

php

jquery

angularjs

drop-down-menu