Question

我很难选择在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中的值。我能够正确地获得这些值。问题是选择框被选中为某些值，我尝试了一些你可以在同一个脚本标签中看到的代码。

Answer 1

根据我的经验，使用ng-repeat并不总是按照预期的方式用于具有动态值的选择。试试这个，只需更改ng-model变量，也可以像往常一样更改选择的选项。

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

修改：您可以像往常一样使用过滤器，如图所示here

Answer 2

我在选项上使用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>这样的内容：

yum install git

查看此answer

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

2 个答案: