0

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:

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

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

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.

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!

3
  • what is f in your view? Commented Mar 28, 2016 at 20:39
  • f is followinquestions. If I refresh the browser, the values sometime display. Commented Mar 28, 2016 at 20:52
  • can you create plunker or snippet? Commented Mar 28, 2016 at 20:57

1 Answer 1

2
 $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>
Sign up to request clarification or add additional context in comments.

3 Comments

You didnt add your array into scope. Use $scope.qOptions = [];
Thank you! That was it! -- Well I thought so, but the values showed up then disappeared again!
Recheck your algorithm, the code for listing in the dropdown is there. Good luck

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.