Develop Reference

When clicking the button, show accordion (Jquery)

I need help with a code. Apparently, it seems like a simple problem. I want to make a script so that when the user clicks the button, it shows the accordion. I was even able to write something that worked, but I wanted to open an accordion for each card separately. I think it's the "this" tag, but the problem is that ".find" doesn't find the accordion because it's not in the same group as the button.
See my code, you will understand better.
$('#fuelAccordion').click(function() {
$(this).find('.cardAccordion').slideToggle('show');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card fuelCard">
<div class="flex">
<div class="col">
<div class="flex">
<div>
<i class="fas fa-angle-down pointer" id="fuelAccordion"></i>
</div>
</div>
</div>
</div>
<div class="cardAccordion">
<div class="flex">
<div class="inputGrid">
<div>
<label for="placa">Litros</label>
<select class="form-control">
<option value="5">5 Lts</option>
</select>
</div>
<div>
<label for="placa">Valor total</label>
<input type="text" class="form-control" value="R$38,46" disabled />
</div>
</div>
<button class="btn btn-primary">Adicionar</button>
</div>
</div>
</div>

You need to use parents because this not find .cardAccordion inside #fuelAccordion
$('#fuelAccordion').click(function () {
$(this).parents('.fuelCard').find('.cardAccordion').slideToggle('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card fuelCard">
<div class="flex">
<div class="col">
<div class="flex">
<div>
<i class="fas fa-angle-down pointer" id="fuelAccordion">Test</i>
</div>
</div>
</div>
</div>
<div class="cardAccordion">
<div class="flex">
<div class="inputGrid">
<div>
<label for="placa">Litros</label>
<select class="form-control">
<option value="5">5 Lts</option>
</select>
</div>
<div>
<label for="placa">Valor total</label>
<input type="text" class="form-control" value="R$38,46" disabled />
</div>
</div>
<button class="btn btn-primary">Adicionar</button>
</div>
</div>
</div>

How to store all form values from slider in objects, array or json with JQuery?

I am working on custom slider form in bootstrap and jQuery, and I am able to get form field values on click on radio button, button etc. My problem is I want to store all these values in series like JavaScript objects, array or JSON etc to process all the info, but I'm unable to store these values in series to get one person's information from these fields.
My HTML code is:
<div id="carousel-personal-loan" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row per-loan-gender">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row male_or_female">
<div class="quote-title" msg="Please select your gender">My gender<span class="label label-danger"></span></div>
<div class="col-xs-6 male">
<label>
<img src="1.png" />
<div>
<input type="radio" name="gender" id="male" value="male" class="next-slide">
</div>
<span>Male</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="2.png" />
<div>
<input type="radio" name="gender" id="female" value="female" class="next-slide">
</div>
<span>Female</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-4"></div>
</div>
</div>
<div class="item">
<div class="row per-loan-city">
<div class="quote-title" msg="Where do you live currently?">Where do you live currently?<span class="label label-danger"></span></div>
<div class="col-xs-1"></div>
<div class="col-xs-2">
<label>
<img src="3.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hyderabad" value="hyderabad" class="next-slide">
</div>
<span>Hyderabad</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="4.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="chennai" value="chennai" class="next-slide">
</div>
<span>Chennai</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="5.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="bangalore" value="bangalore" class="next-slide">
</div>
<span>Bangalore</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="6.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hosur" value="hosur" class="next-slide">
</div>
<span>Hosur</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="7" width="130" height="130">
<div>
<input type="radio" name="livecity" id="other_city" value="other city" class="next-slide">
</div>
<span>Other City</span>
</label>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
<div class="item" id="SalOrSelf">
<div class="row per-loan-sources">
<div class="quote-title" msg="Are You">Are You<span class="label label-danger"></span></div>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row sal_or_self">
<div class="col-xs-6 male">
<label>
<img src="8.png" />
<div>
<input type="radio" name="salorself" id="salaried" value="salaried" class="next-slide">
</div>
<span>Salaried</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="9.png" />
<div>
<input type="radio" name="salorself" id="selfemp" value="selfemp" class="next-slide">
</div>
<span>Self-employed</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-3"></div>
<div class="col-xs-3">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-3"></div>
</div>
</div>
<div id="salcont"></div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-personal-loan" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-personal-loan" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
My jQuery and object create code is:
jQuery(".active input[type=radio]" ).live( "click", function() {
var getAllValues = jQuery(this).val();
alert(getAllValues); //Able to get all the values here when click on fields in slider
var getQuote = { "maleOrFemale":"MaleOrFemale", "currentCity":"YourCity", "Profession":"salOrSelf" };
getQuote.maleOrFemale = getAllValues; //Not be able to Modify value in above getQuote Object
getQuote.currentCity = getAllValues; //Not be able to Modify value in above getQuote Object
getQuote.Profession = getAllValues; //Not be able to Modify value in above getQuote Object
console.log(getQuote); //Not showing proper results as I want to modify all above objects as per form field selection
});

Try this .use with on() instead of live() And also use changeevent instead of click .Better way to create the object key from name(attr('name')) of the input tag
Working example Updated
var getQuote = { };
jQuery("input[type=radio] , select").on("change", function() { // select tag was added
$("input[type=radio]:checked ,select").each(function(a){ // selected value pass with object
getQuote[$(this).attr('name')] = jQuery(this).val();
})
console.log(getQuote);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selected">
<option value="one">one</option>
<option value="two">two</option>
</select>
<div id="carousel-personal-loan" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row per-loan-gender">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row male_or_female">
<div class="quote-title" msg="Please select your gender">My gender<span class="label label-danger"></span></div>
<div class="col-xs-6 male">
<label>
<img src="1.png" />
<div>
<input type="radio" name="gender" id="male" value="male" class="next-slide">
</div>
<span>Male</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="2.png" />
<div>
<input type="radio" name="gender" id="female" value="female" class="next-slide">
</div>
<span>Female</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-4"></div>
</div>
</div>
<div class="item">
<div class="row per-loan-city">
<div class="quote-title" msg="Where do you live currently?">Where do you live currently?<span class="label label-danger"></span></div>
<div class="col-xs-1"></div>
<div class="col-xs-2">
<label>
<img src="3.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hyderabad" value="hyderabad" class="next-slide">
</div>
<span>Hyderabad</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="4.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="chennai" value="chennai" class="next-slide">
</div>
<span>Chennai</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="5.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="bangalore" value="bangalore" class="next-slide">
</div>
<span>Bangalore</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="6.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hosur" value="hosur" class="next-slide">
</div>
<span>Hosur</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="7" width="130" height="130">
<div>
<input type="radio" name="livecity" id="other_city" value="other city" class="next-slide">
</div>
<span>Other City</span>
</label>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
<div class="item" id="SalOrSelf">
<div class="row per-loan-sources">
<div class="quote-title" msg="Are You">Are You<span class="label label-danger"></span></div>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row sal_or_self">
<div class="col-xs-6 male">
<label>
<img src="8.png" />
<div>
<input type="radio" name="salorself" id="salaried" value="salaried" class="next-slide">
</div>
<span>Salaried</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="9.png" />
<div>
<input type="radio" name="salorself" id="selfemp" value="selfemp" class="next-slide">
</div>
<span>Self-employed</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-3"></div>
<div class="col-xs-3">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-3"></div>
</div>
</div>
<div id="salcont"></div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-personal-loan" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-personal-loan" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

Each time an answer is selected you could append the answer to an object/array?
I would also suggest using the "change" event rather than click event, as it is not necessary to run the code unless the values have been changed.
You could try something like this:
var obj = {};
$('.active input[type=radio]').on("change", function(){
var $this = $(this),
$name = $this.attr("name");
obj[$name] = $this.val();
});
In doing this, you would get a result that looked something like this:
obj = {
gender: "male",
livecity: "othercity",
salorself: "selfemp"
};
In doing this, it would also allow people to go back and change their answers if you wanted to allow them to do so.

How to get Underscore in textbox content in MVC in Print preview mode

I have printing textbox, labels and dropdown values on print preview page. Here I've attached Codepen link as well as code what I have done yet.
HTML
<form>
<div class="container no-print">
<div class="row" id="DivDate">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right">
<input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
</div>
</div>
</div>
</div>
<div id="DivDoc">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-2 col-xs-4">
Respected Dr.
</label>
<div class="col-md-10 col-xs-8">
<input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div id="DivData">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-2">
Referring
</label>
<div class="col-xs-4 col-md-2">
<select name="ddlGender" class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
to you for the favour of your kind consultation of
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="his">his</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<select name="ddlOption" class="form-control">
<option value="C/O">C/O</option>
</select>.
</div>
<label class="col-xs-9">
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
Please do the needful to evaluate the case and treat
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="him">him</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
accordingly.
</label>
</div>
</div>
</div>
</div>
<div class="row" id="DivFooter">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
<input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
</div>
<div class="col-xs-4">
<input type="button" value="Print" class="btn btn-block btn-primary" />
</div>
<div class="col-xs-4">
<input type="button" value="Cancel" class="btn btn-block btn-default" />
</div>
</div>
</div>
</div>
</form>
<div class="print">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right" id="PrintDate">
</div>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintDoc">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintData">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
And Jquery:
$("#BtnSave").click(function() {
var values1 = [];
$('#DivDate').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values1.push($(this).val().trim());
} else {
values1.push($(this).text().trim());
}
});
$("#PrintDate").text(values1.join(" "));
var values2 = [];
$('#DivDoc').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values2.push($(this).val().trim());
} else {
values2.push($(this).text().trim());
}
});
$("#PrintDoc").text(values2.join(" "));
var values3 = [];
$('#DivData').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values3.push($(this).val().trim());
} else {
values3.push($(this).text().trim());
}
});
$("#PrintData").text(values3.join(" "));
window.print();
});
CodePen:https://codepen.io/anon/pen/GmjmBr
I want underscore under input text like doctorname and patient name. Can I add HTML any how in preview mode?
As I am getting value of all input in array and joining it, I don't think I can save HTML code in array.
I've attached Image for better clarification

Input name is not getting interpolated from {{}} to the value

Below is the attached picture of the form constructor. As you can see it has {{service.name}} in it instead o fthe name itself.
I have a form inside that I have two ng-repeats with custom filters on it and inside that I have an input field. I am trying to have a unique name for my input field by adding an index or by using a field from the html response. Regardless of that, when I have name="{{customitem.name}}" or name="{{$index}}" the form generates a constructor with {{customitem}} or {{$index}} instead of the value it self. Also this form turned on and off using ng-if.
<form name="selectServiceForm">
<div data-ng-show="showAddServices">
<section class="content-header">
<div class="row">
<div class="col-lg-5 col-sm-5">
<h1>
Services
<small>Add or Modify Services</small>
</h1>
</div>
<div class="col-lg-7 col-sm-7 text-right btn-container">
<button type="button" class="btn btn-primary btn-sm" data-ng-disabled="selectServiceForm.$invalid" data-ng-click="selectServiceForm.$valid && save(true)">
<i class=" fa fa-save"></i>
<span class="indent-xs">Save</span>
</button>
<button type="button" class="btn btn-primary btn-sm" data-ng-click="backToAddServices()">
<i class=" fa fa-arrow-circle-left"></i>
<span class="indent-xs">BACK</span>
</button>
</div>
</div>
</section>
<section class="content group-container">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="">Industry<sup style="color: red">*</sup></label>
<select class="form-control" id="select1" name="" data-ng-model="selectedIndustry" data-ng-change="onChangeIndustry(selectedIndustry)"
data-ng-options="industry.CategoryName for industry in Industry">
<option value="">Select Industry</option>
</select>
</div>
<div data-ng-show="isSecondLevelCategory">
<div class="form-group">
<label for="">
Category<sup style="color: red">*</sup>
</label>
<select class="form-control" id="selectCategory" name="" data-ng-model="selectedService" data-ng-change="showServices(selectedService)"
data-ng-options="service.CategoryName for service in ServiceTypes">
<option value="">Select Category</option>
</select>
</div>
</div>
</div>
</div>
<hr />
<div class="selectServ">
<div class="pad20B p-relative">
<div data-ng-repeat="item in innerCategoryList | orderBy: 'SortOrder'" class="">
<div class="form-row pad10B mrg0A pad0B mrg5T">
<label>
<input class="wauto float-left mrg5R" type="checkbox" data-ng-model="item.checked" data-ng-checked="item.checked" data-ng-click="categorySelected(item)" />
<strong class="float-left">{{item.CategoryName}}</strong>
</label>
</div>
<div data-ng-show="item.checked" style="padding-left: 25px" class="pad15L">
<div data-ng-repeat="service in serviceList | servicelistfilter:item.ShortName | orderBy: 'SortOrder' ">
<div class="form-row mrg0A pad10B">
<div class="row">
<div class="col-lg-8 col-md-6 col-sm-6">
<div class="service-amount-label pad5L mrg5T">
<label>
<input class="wauto float-left mrg5R" type="checkbox" data-ng-model="service.checked"
data-ng-checked="service.checked" data-ng-click="selectService(service)" />
<strong class="float-left">{{service.Name}}</strong>
</label>
</div>
</div>
<!--TAP-4394
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-amount float-right" data-ng-show="service.checked && !service.hideRange">
<input type="text" placeholder="$50" data-ng-model="featureDetail.minAmount" name="minAmount" data-ng-required="featureDetail.isSelected">
<span class="mrg5R mrg5T">$</span>
<decimal-text-box class="mrg5R" max-value="service.MaxAmount" min-value="'invalid'" min-max-error="service.minMaxError" input-placeholder="'$min'" input-class="'selectService'" input-value="service.MinAmount"></decimal-text-box>
<span class="dash mrg5R mrg5T">–</span>
<span class=" mrg5R mrg5T">$</span>
<decimal-text-box class=" " max-value="'invalid'" min-value='service.MinAmount' min-max-error="service.minMaxError" input-placeholder="'$max'" input-class="'selectService'" input-value="service.MaxAmount"></decimal-text-box>
<div data-ng-show="service.checked && !service.hideRange" class="new-error-style">
<span data-ng-show="service.minMaxError" class="font-white">min should not be greater than max</span>
</div>
</div>
</div>-->
<!-- <div class="col-lg-5">
<div data-ng-show="service.checked && !service.hideRange">
<span data-ng-show="service.minMaxError" class="font-red">min should not be greater than max</span>
</div>
</div>-->
</div>
</div>
<div class="form-row pad10B mrg0A service-custom-text"
data-ng-repeat="customitem in customServiceList | listfilter:service.ShortName "
data-ng-show="service.checked" data-ng-model="customServiceList" ng-init="">
<!--data-ng-click="showEditCustomService(customSvc.CustomText,customSvc.Amount)"-->
<div class="col-md-5 col-sm-5">
<span class="pad0L pointer" data-ng-click="removeCustomService(service,customitem.Id)"><i class="fa fa-fw fa-minus-circle"></i></span>
<input type="text" data-ng-model="customitem.CustomText" placeholder="Custom Service" class="selectService w40 mrg5Bxs" />
<span class="mrg20L">
<decimal-text-box min-value="'invalid'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'Amount'" input-class="'selectService w40 '" input-value="customitem.Amount"></decimal-text-box>
</span>
<textarea class="selectDescription" cols='60' rows='8' data-ng-model="customitem.CustomDescription" placeholder="Description (Optional)"></textarea>
</div>
<div ng-hide="businessModel.name == 'Book Now'">
<div class="center-bor" style="height: 231px;"></div>
<div class="float-left col-md-5 col-sm-5 activate-bundle-container gray">
<div class="activate-bundle-button" ng-hide="customitem.CustomServiceBundle && !customitem.isDeleteBundle" ng-click="activateBundle(customitem)">Activate Bundle Rates</div>
<div ng-show="customitem.CustomServiceBundle && !customitem.isDeleteBundle">
<div class="cancel-bundle-button" ng-click="cancelBundle(customitem)">Cancel</div>
<input name="customBundleQuantity" type="number" class="selectService mrg70T" placeholder="# of Bundles" ng-model="customitem.CustomServiceBundle.BundleQuantity" ng-change="change(customitem.CustomServiceBundle.BundleQuantity, customitem)" />
<div class="font-red" ng-if="selectServiceForm.customBundleQuantity.$error.pattern">Quantiy must be more than 1.</div>
<input type="number" step="0.5" name="{{service.name}}"
class="selectService mrg20T" placeholder="Price (per Unit)"
ng-model="customitem.CustomServiceBundle.BundlePrice"
ng-change="change(customitem.CustomServiceBundle.BundlePrice, customitem)" compare-price price-to-compare="customitem.Amount" />
<div class="font-red" ng-if="selectServiceForm.customBundlePrice.$error.priceValid">Bundle Price must be less than Original Price..</div>
<!--<decimal-text-box min-value="'2'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'# of Bundles'" input-class="'selectService mrg70T'" input-value="customitem.CustomServiceBundle.BundleQuantity" change="Change"></decimal-text-box>-->
<!--<decimal-text-box min-value="'1'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'Price'" input-class="'selectService mrg20T'" input-value="customitem.CustomServiceBundle.BundlePrice"></decimal-text-box>-->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9">
<div class="custom-service" data-ng-show="service.checked">
<div class="pad10B pad0T pad0L">
<i class="fa fa-fw fa-plus-circle"></i>Add a Service
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End of selectServiceForm-->
</div>
</section>
</div>
</form>
My project is using Angular v1.3.15, I know its an old version but it will be too much to jump forward from this version.

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