【问题标题】:Angular Options not Displaying in Dropdown List角度选项未显示在下拉列表中
【发布时间】:2016-03-28 20:01:16
【问题描述】:

我正在尝试填充下拉列表,但无法显示选项,我无法弄清楚原因。我用这个填充控制器中的选项:

 var qOptions = [];
 if (value.vchChoice1 != '') {
    qOptions.push(value.vchChoice1);
  };
 if (value.vchChoice2 != '') {
    qOptions.push(value.vchChoice2);
  };
if (value.vchChoice3 != '') {
  qOptions.push(value.vchChoice3);
 };
if (value.vchChoice4 != '') {
  qOptions.push(value.vchChoice4);
  };
$scope.followingquestions[key].qOptions = qOptions;
   qOptions = [];

然后在我的 HTML 中是这样的:

<select ng-model="f.vchShortAnswer">
   <option value="">--Please Select--</option>
   <option ng-repeat="z in f.qOptions" value="{{z}}">{{z}}</option>
</select>

这是整个 HTML 代码,以防万一有什么东西导致选项出现然后消失:

            <div ng-repeat="f in followingquestions">
            <div ng-switch="f.ClusterTypeID">
                <div ng-switch-when="1048576">
                    <div class="row row-relative">
                        <div class="col-md-12">
                            <div ng-bind-html="f.vchQuestionText | trustedhtml"></div><br />
                            <div>
                                <table>
                                    <thead style="background-color:#b1d6f1">
                                        <tr>
                                            <th>{{headers.vchTextElementOneHeader}}</th>
                                            <th>{{headers.vchTextElementTwoHeader}}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="answ in headers.Answers">
                                            <td>{{answ.vchTextElementOne}}</td>
                                            <td>{{answ.vchTextElementTwo}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div><br />
                </div>
                <div ng-switch-when="1">

                    <div class="row row-relative">
                        <div class="col-md-9">
                            <span ng-bind-html="f.vchQuestionText | trustedhtml"></span>&nbsp;<span ng-if="f.vchToolTip != null" style="cursor:pointer"><i class="glyphicon glyphicon-info-sign" tooltip="{{f.vchToolTip}}"></i></span>
                        </div>
                        <div class="col-md-3 col-border" ng-switch="f.vchAnswerTableName">
                            <div class="col-border-padding">
                                <div ng-switch="f.AnswerTypeID">
                                    <div ng-switch-when="1">
                                        <input type="radio" ng-model="f.vchShortAnswer" value="Yes" style="width:20px" />&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" data-ng-model="f.vchShortAnswer" value="No" style="width:20px" />&nbsp;No
                                    </div>
                                    <div ng-switch-when="5">
                                        @*<select data-ng-model="f.vchShortAnswer" ng-options="qO as qO for qO in f.qOptions" class="form-control">*@
                                        <select ng-options="z as z for z in f.qOptions" ng-model="f.vchShortAnswer" class="form-control">
                                            <option value="">--Please Select--</option>
                                        </select>
                                    </div>
                                    <div ng-switch-when="8">
                                        <textarea ng-model="f.vchLongAnswer" style="width:100%"></textarea>
                                    </div>
                                    <div ng-switch-when="10">
                                        <input type="text" ng-model="f.dteDateAnswer" />
                                    </div>
                                    <div ng-switch-when="9">
                                        <input type="text" ng-model="f.decNumericAnswer" />
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                    <div ng-repeat="child in f.Dependents">
                        <div class="row row-relative">
                            <div class="col-md-9">
                                <span ng-bind-html="child.vchQuestionText | trustedhtml"></span>&nbsp;<span ng-if="child.vchToolTip != null style=" cursor:pointer""><i class="glyphicon glyphicon-info-sign" tooltip="{{child.vchToolTip}}"></i></span>
                            </div>
                            <div class="col-md-3 col-border" ng-switch="child.vchAnswerTableName">
                                <div class="col-border-padding">
                                    <div ng-switch="child.AnswerTypeID">
                                        <div ng-switch-when="8">
                                            <div ng-switch="child.bitDependentOnParent">
                                                <div ng-switch-when="true">
                                                    <div ng-if="p.vchShortAnswer == child.vchParentAnswerMakesEnabled">
                                                        <textarea ng-model="child.vchLongAnswer" style="width:100%"></textarea>
                                                    </div>
                                                    <div ng-else>
                                                        <textarea ng-model="child.vchLongAnswer" style="width:100%" disabled></textarea>
                                                    </div>
                                                </div>
                                                <div ng-switch-when="false">
                                                    <textarea ng-model="child.vchLongAnswer" style="width:100%"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div ng-switch-when="1">
                                            <input type="radio" data-ng-model="form.child.vchShortAnswer" value="Yes" style="width:20px" />&nbsp;Yes&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" data-ng-model="form.child.vchShortAnswer" value="No" style="width:20px" />&nbsp;No
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我知道 f.qOptions 中有值,我可以使用只有 div 标签的重复来显示它们,但我无法让它们显示在下拉列表中。

我也尝试了以下方法,但它们仍然没有显示:

ng-options="z as z for z in f.qOptions"

更奇怪的是……值短暂显示,然后消失了!

我认为我在这里遗漏了一些简单的东西,因为我在选择选项列表中显示了其他列表,这与我在上面尝试的方式几乎相同。非常感谢任何帮助!

【问题讨论】:

  • 你认为 f 是什么?
  • f 是followinquestions。如果我刷新浏览器,有时会显示这些值。
  • 你能创建 plunker 或 sn-p 吗?

标签: javascript angularjs


【解决方案1】:
 $scope.qOptions = [];
 if (value.vchChoice1 != '') {
     $scope.qOptions.push(value.vchChoice1);
 };
 if (value.vchChoice2 != '') {
     $scope.qOptions.push(value.vchChoice2);
 };
 if (value.vchChoice3 != '') {
     $scope.qOptions.push(value.vchChoice3);
 };
 if (value.vchChoice4 != '') {
     $scope.qOptions.push(value.vchChoice4);
 };
 $scope.followingquestions[key].qOptions = $scope.qOptions;


 <select ng-options="z as z for z in f.qOptions" ng-model="f.vchShortAnswer">
   <option value="">--Please Select--</option>
 </select>

【讨论】:

  • 您没有将数组添加到范围内。使用 $scope.qOptions = [];
  • 谢谢!就是这样! -- 嗯,我是这么想的,但是值出现了然后又消失了!
  • 重新检查你的算法,下拉列表中的代码就在那里。祝你好运
猜你喜欢
  • 2018-12-29
  • 2022-01-10
  • 2016-01-28
  • 2019-08-02
  • 2021-03-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-08-01
相关资源
最近更新 更多