[英]Angular Options not Displaying in Dropdown List
I am trying to populate a dropdown list, but I cannot get the options to display and I cannot figure out why. 我正在尝试填充一个下拉列表,但是我无法显示要显示的选项,也无法弄清原因。 I populate the options in my controller with this: 我在控制器中填充以下选项:
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 = [];
Then in my HTML like this: 然后在我的HTML中是这样的:
<select ng-model="f.vchShortAnswer">
<option value="">--Please Select--</option>
<option ng-repeat="z in f.qOptions" value="{{z}}">{{z}}</option>
</select>
Here is the entire HTML code, just in case there is something there that is causing the options to appear then disappear: 这是整个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> <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" /> Yes <input type="radio" data-ng-model="f.vchShortAnswer" value="No" style="width:20px" /> 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> <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" /> Yes <input type="radio" data-ng-model="form.child.vchShortAnswer" value="No" style="width:20px" /> No
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I know that there are values in f.qOptions, and I can display them using a repeat with just div tags, but I cannot get them to display in the dropdown list. 我知道f.qOptions中有值,我可以仅使用div标签使用重复显示它们,但无法在下拉列表中显示它们。
I also tried the following but they still don't show: 我也尝试了以下方法,但它们仍然没有显示:
ng-options="z as z for z in f.qOptions"
Even more strange... the values displayed briefly, then disappeared! 更奇怪的是……这些值会短暂显示,然后消失!
I figure that I am missing something simple here as I have displayed other lists in select option lists pretty much the same way as I was attempting to do above. 我发现这里缺少一些简单的东西,因为我在选择选项列表中显示了其他列表,几乎与我上面尝试的方式相同。 Any assistance is greatly appreciated! 非常感谢您的协助!
$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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.