Following were my html:
<div class="col-md-2">
<select class=" form-control" title="Dropdown" id="country-change">
<option value="all">All Countries</option>
<option value="US">US</option>
<option value="UK">UK</option>
<option value="USSR">USSR</option>
</select>
</div>
<div class="col-md-12 country-<%=product.country%>">
<div class="col-md-3">
<a href="<%= edit_product_path product %>" class="thumbnail">
<% if product.product_overview_url.present? %>
<img src="<%= product.product_overview_url %>" alt="...">
<% else %>
<img src="<%= asset_url('placehold_200_200.png') %>" alt="...">
<% end %>
</a>
</div>
<div class="col-md-6">
<h5><%= product.name %>, for traveller in <%= product.city %></h5>
<i class="fa fa-cog fa-fw"></i> Manage Listing and Price
<br>
<i class="fa fa-eye fa-fw"></i> Preview Listing
</div>
<div class="col-md-3">
<select class=" form-control <%= product.status %> product-status" title="Dropdown" id="status-change" product-id="<%= product.id %>">
<option value="enable" <%= 'selected' if product.status == 'enable' %>>Listed</option>
<option value="disable" <%= 'selected' if product.status == 'disable' %>>Unlisted</option>
</select>
</div>
</div>
The country in which the div belongs represented by country-<%= product.country%>, in which I will get results like:
<div class="col-md-12 country-UK">...</div>
<div class="col-md-12 country-US">...</div>
<div class="col-md-12 country-US">...</div>
<div class="col-md-12 country-USSR">...</div>
When a selection of which country need to be displayed is selected, how can I hide the non selected one?
$('#country-change').on('change', function(){
var listed_country = $(this).val();
$('.country-'+listed_country).fadeOut('slow');
})
The above code hide the selected one. How can I can display the selected one and hide all the non selected? Thanks
Add an additional class to all the div
<div class="col-md-12 country country-UK">...</div>
<div class="col-md-12 country country-US">...</div>
<div class="col-md-12 country country-US">...</div>
<div class="col-md-12 country country-USSR">...</div>
then hide all the country div elements other than the selected one
$('#country-change').on('change', function(){
var listed_country = $(this).val();
var $c = $('.country-'+listed_country).fadeIn('slow');
$('div.country').not($c).fadeOut('slow');
})
$('#country-change').on('change', function() {
var listed_country = $(this).val();
if (listed_country == 'All') {
$('div.country').stop(true).fadeIn('slow');
} else {
var $c = $('.country-' + listed_country).stop(true).fadeIn('slow');
$('div.country').not($c).stop(true).fadeOut('slow');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country-change">
<option>All</option>
<option>UK</option>
<option>US</option>
<option>FR</option>
<option>USSR</option>
</select>
<div class="col-md-12 country country-UK">UK</div>
<div class="col-md-12 country country-US">US</div>
<div class="col-md-12 country country-FR">FR</div>
<div class="col-md-12 country country-USSR">USSR</div>
You can hide the siblings of target element and only show current element:
$('#country-change').on('change', function(){
var listed_country = $(this).val();
var targetdiv = $('.country-'+listed_country);
targetdiv.stop().fadeIn('slow');
targetdiv.siblings().stop().fadeOut('slow');
});
Related
I managed to dynamically add input fields using this code :
My HTML :
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My script :
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
No, I'm trying to get the id_casting of each selected item in selecbox for each added rows
So I tried the following scipt :
<script type="text/javascript">
$(document).ready(function(){
$("#id_casting").change(function(){
console.log("clickk");
let id_casting = $(this).find("option:selected").data("id");
console.log(id_casting);
});
});
/* });*/
</script>
Bu this script get only the id_casting of the first row and when I add a new row and I select item from select-box it doesn't get the id_casting of the selected item of select-box added
dynamically.
once I submit a form I want to reset it. Everything is resetting except the select menu. I have tried this:
const catDrop = document.getElementById('category');
catDrop.selectedIndex = 0;
In the code, it looks like a normal option:
<form id="add-listing">
<div class="col-lg-12">
<div id="add-listing">
<div class="add-listing-section">
<div class="add-listing-headline">
<h3>Basic Information</h3>
</div>
<div class="row with-forms">
<div class="col-md-12">
<h5>Item Name <i class="tip" data-tip-content=""></i></h5>
<input class="search-field" type="text" name="title" id="title" />
</div>
</div>
<div class="row with-forms">
<div class="col-md-12">
<h5>Category</h5>
<select class="chosen-select-no-single" name="category" id="category">
<option value="0">Select Category</option>
<% for (const categories of cats) { %>
<option value="<%= categories.catName %>">
<%= categories.catName %>
</option>
<% } %>
</select>
</div>
</div>
<div class="row with-forms">
<input type="file" name="files" id="image" data-fileuploader-limit="3" data-fileuploader-maxSize="5" data-fileuploader-extensions="jpg, png, jpeg">
</div>
<div class="row with-forms">
<div class="col-md-12">
<h5>Description</h5>
<textarea class="WYSIWYG" name="description" cols="40" rows="3" id="description"
spellcheck="true"></textarea>
</div>
</div>
</div>
<input type="hidden" name="_csrf" value="<%= csrfToken %>" id="csrf">
<button type="submit" class="button preview addItem">Add Item <i class="fa fa-arrow-circle-right"></i></button>
<div class="error"></div>
<div class="successmsg"></div>
</div>
</div>
</form>
But it does not reset the select menu. When taking a look in console what it looks like, it seems that it is styled as an unordered list with list items like this:
<select class="chosen-select-no-single" name="category" id="category" style="display: none;">
<option value="0">Select Category</option>
<option value="Stuff">
Stuff
</option>
</select>
<div
class="chosen-container chosen-container-single chosen-container-single-nosearch chosen-container-active"
style="width: 100%;"
title=""
id="category_chosen"
>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off" readonly="" />
</div>
<ul class="chosen-results">
<li class="active-result" data-option-array-index="0" style="">
Select Category
</li>
<li class="active-result" data-option-array-index="11" style="">
Stuff
</li>
</ul>
</div>
</div>
This is the item I want to set it back to once the form has submitted.
The problem seems to be here
<form id="add-listing">
<div class="col-lg-12">
<div id="add-listing">
You have two dom elements with same id, which always need to be unique. Change the id of the form or divand then insidethencall thereset` function
Also you need to pass a string to selectedIndex
document.getElementById('category').selectedIndex = "0"
I have a cart function that adds items to it, but I cannot get it to add the details of that item. Right now it just pulls generic data I would like it to get the product title, location and dates. I know there is a way to get to the text of the HTML, but don't know how to add it to this script. Here is the HTML mark up:
var cartOpen = false;
var numberOfProducts = 0;
$('body').on('click', '.js-toggle-cart', toggleCart);
$('body').on('click', '.js-add-product', addProduct);
$('body').on('click', '.js-remove-product', removeProduct);
function toggleCart(e) {
e.preventDefault();
if (cartOpen) {
closeCart();
return;
}
openCart();
}
function openCart() {
cartOpen = true;
$('body').addClass('open');
}
function closeCart() {
cartOpen = false;
$('body').removeClass('open');
}
function addProduct(e) {
e.preventDefault();
openCart();
$('.js-cart-empty').addClass('hide');
var product = $('.js-cart-product-template').html();
$('.js-cart-products').prepend(product);
numberOfProducts++;
}
function removeProduct(e) {
e.preventDefault();
numberOfProducts--;
$(this).closest('.js-cart-product').hide(250);
if (numberOfProducts == 0) {
$('.js-cart-empty').removeClass('hide');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="cards-item">
<figure class="card product">
<div class="card-image card-image-2lc"></div>
<figcaption class="card-content">
<h1 class="card-title">McElroy</h1>
<h2 class="card-title product__title">2LC Fusion Machine 1/2" CTS - 2" IPS Pipe</h2>
<p class="card-text">The 2LC employs a semi-automatic locking cam (LC) system to maintain force during the cooling cycle. It incorporates McElroy's patented Centerline Guidance System and is designed to butt fuse tees, ells and other fittings.</p>
<form action="" method="">
<fieldset class="product">
<div class="formrow">
<div class="formitem col1">
<label class="label req" for="pu-2lc">Pick Up Date</label>
<input type="date" name="pu-2lc" id="pu-2lc/>
</div>
</div>
<div class=" formrow ">
<div class="formitem col1 ">
<label class="label req " for="rd-2lc ">Return Date</label>
<input type="date " name="rd-2lc " id="rd-2lc "/>
</div>
</div>
<div class="formrow ">
<div class="formitem col1of2 ">
<label class="label " for="country ">Country</label>
<select name="country " id="country " x-autocompletetype="country-name ">
<option selected="selected ">please choose</option>
<option value="bkf ">Bakersfield</option>
<option value="ch ">Chico</option>
<option value="fsn ">Fresno</option>
<option value="hyw ">Hayward</option>
<option value="mtc ">Manteca</option>
<option value="oak ">Oakley</option>
<option value="rwc ">Redwood City</option>
<option value="sac ">Sacramento</option>
<option value="sal ">Salinas</option>
<option value="sj ">San Jose</option>
<option value="sjf ">San Jose Fusion</option>
<option value="sr ">Santa Rosa</option>
</select>
</div>
</div>
</fieldset>
<div class="buttons ">
<div class="back ">
<button class="primary button js-add-product " title="Add to cart " >Add to Cart</button>
</div>
</div>
</form>
</figcaption>
</figure>
</article>
<aside class="cart js-cart ">
<div class="cart__header ">
<h1 class="cart__title ">Shopping cart</h1>
<p class="cart__text ">
<a class="button button--light js-toggle-cart " href="# " title="Close cart ">
Close cart
</a>
</p>
</div>
<div class="cart__products js-cart-products ">
<p class="cart__empty js-cart-empty ">
Add a product to your cart
</p>
<div class="cart__product js-cart-product-template ">
<article class="js-cart-product ">
<h1>Product title</h1>
<p>Pick up Date</p>
<p>Return Date</p>
<p>Location</p>
<p>
<a class="js-remove-product " href="# " title="Delete product ">
Delete product
</a>
</p>
</article>
</div>
</div>
<div class="cart__footer ">
<p class="cart__text ">
<a class="button " href="# " title="Buy products ">
Buy products
</a>
</p>
</div>
</aside>
Thanks for any help.
This will select the text of the product__title
$('.product__title').text()
This will get the country option selected text and value
$('#country option:selected').val()
$('#country option:selected').text()
This will get your dates
$('#pu-2lc').val()
Once you have the text, you can place it where you want. Just looking over the code it looks like you would want to grab these values within the
addProduct() method. Please let me know if that is what you are looking for. I can provide more insight if we had the code for the cart its self.
I am using jquery's data attributes to search values from dropdown. Here below is the thing what i am doing here..
$(document).ready(function() {
// Default selected as blank value
$('#search_by_brand').prop('selectedIndex', "");
// Our work page - Search by Brand
$('#search_by_brand').change(function() {
$('#search_by_channel').prop('selectedIndex', "");
$('#search_by_type').prop('selectedIndex', "");
var brand_value = $(this).val();
if(brand_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-brand='"+ brand_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
// Default selected as blank value
$('#search_by_channel').prop('selectedIndex', "");
// Our work page - Search by Product Channel
$('#search_by_channel').change(function() {
$('#search_by_brand').prop('selectedIndex', "");
$('#search_by_type').prop('selectedIndex', "");
var channel_value = $(this).val();
if(channel_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-channel='"+ channel_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
// Default selected as blank value
$('#search_by_type').prop('selectedIndex', "");
// Our work page - Search by Product Type
$('#search_by_type').change(function() {
$('#search_by_brand').prop('selectedIndex', "");
$('#search_by_channel').prop('selectedIndex', "");
var type_value = $(this).val();
if(type_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-type='"+ type_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
<div class="form-group">
<label class="control-label">Brand</label>
<select class="form-control" id="search_by_brand" name="search_by_brand">
<option value="">Select Product Brand</option>
<option value="GLAM">GLAM</option>
<option value="PEDIGREE">PEDIGREE</option>
<option value="NESTLE">NESTLE</option>
<option value="HAVAIANAS">HAVAIANAS</option>
<option value="ROYAL CANIN">ROYAL CANIN</option>
<option value="EUKANUBA">EUKANUBA</option>
</select>
</div>
<div class="form-group m-l-30">
<label class="control-label">Channel</label>
<select class="form-control" id="search_by_channel" name="search_by_channel">
<option value="">Select Product Channel</option>
<option value="Pharmacy">Pharmacy</option>
<option value="Pet">Pet</option>
<option value="Department Store">Department Store</option>
<option value="Vet">Vet</option>
</select>
</div>
<div class="form-group m-l-30">
<label class="control-label">Type</label>
<select class="form-control" id="search_by_type" name="search_by_type">
<option value="">Select Product Type</option>
<option>Advertisement</option>
<option>Campaign</option>
</select>
</div>
</form>
<div class="filtr-container">
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="GLAM" data-channel="Vet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/10">
<img src="http://static.tumblr.com/yka2yx5/YHAm28h2j/glam_fb.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">GLAM</span><br>
<span class="f-s-23 lobstar">Daily Care</span><br>
<span class="roboto-light">Vet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="ROYAL CANIN" data-channel="Pet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/9">
<img src="http://www.royalcanin.com.au/extension/site_subsidiary_v3/design/subsidiary_v3/images/article/no-img-article.png" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">ROYAL CANIN</span><br>
<span class="f-s-23 lobstar">Feline Gondola End</span><br>
<span class="roboto-light">Pet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="HAVAIANAS" data-channel="Department Store" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/8">
<img src="http://image.brazilianbikinishop.com/images/products/flipflop-havaianas-brasil-logo-green-0.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">HAVAIANAS</span><br>
<span class="f-s-23 lobstar">Pop Up</span><br>
<span class="roboto-light">Department Store</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="NESTLE" data-channel="Pharmacy" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/7">
<img src="http://www.indiantelevision.com/sites/drupal7.indiantelevision.co.in/files/images/mam-images/2016/04/18/mam%20financials.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">NESTLE</span><br>
<span class="f-s-23 lobstar">Good Life</span><br>
<span class="roboto-light">Pharmacy</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="PEDIGREE" data-channel="Pet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/6">
<img src="https://www.petsworld.in/media/brands/6/pedigree2.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">PEDIGREE</span><br>
<span class="f-s-23 lobstar">Cleaner gets you closer</span><br>
<span class="roboto-light">Pet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="GLAM" data-channel="Pharmacy" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/5">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/GLAM_logo.png" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">GLAM</span><br>
<span class="f-s-23 lobstar">Beauty Bar</span><br>
<span class="roboto-light">Pharmacy</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
</div>
As you can see in my demo that i am searching Products from Brand,Channel and Type. But i want to enable an ability to Advance Search the same thing with multiple dropdown.
For now it is searching only with one dropdown, i want an ability to search with multiple dropdown say for example, if i select Product Brand "GLAM" and Product Channel "Pharmacy" then only those records should come using "AND" condition or jquery or something like that ..
Same should apply to Product Type as well .. What should i do ?
Thanks
You can assign a class to all select elements and bind change using class selector as code is same for all select elements.
You can create filters based on values of dropdown and dynamically add filters if value of dropdown is selected.
$(document).ready(function () {
$('.selectFilter').change(function () {
var brand_value = $("#search_by_brand").val();
var channel = $('#search_by_channel').val();
var type = $("#search_by_type").val();
var channelFilter = "";
var typeFilter = "";
var brand_valueFiltr = "";
if (brand_value != '')
brand_valueFiltr = "[data-brand='" + brand_value + "']";
if (channel != '')
channelFilter = "[data-channel='" + channel + "']";
if (type != '')
typeFilter = "[data-type='" + type + "']";
$(".filtr-container div").hide();
$(".filtr-container div" + brand_valueFiltr + channelFilter + typeFilter).show().children().show();
$(".filtr-container").find(".mask").show();
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if (visible_divs == 0) {
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else {
$(".no_records").remove();
}
});
});
Here is jsfiddle
In a .ASPX page with WebForm engine <%..%> syntax, I ng-included an Angular .html template as partial. The .ASPX has many server side controls such as <asp:DropDownList runat="server">. Since the input elements included in Angular template don't have RuntAt attribute, the values are not posted to the server. I could have angular script to update some hidden server side controls on the hosting .ASPX page, but that's not ideal since I want to keep the partial as generic as possible. How do I set them up so that the values in the select elements are posted back? Thanks.
WebForm (.ASPX)
<div class="row">
<div class="col-md-12 col-sm-12">
<%-- to be removed --%>
<div style="display:none">
<uc:FaciltyServiceRole ID="FSR" runat="server" ShowFacility="false" />
</div>
<%--*********** inject Angular app and partial ***********--%>
<div ng-app="ufsrAppModule">
<%--ng-include require "single quote 'some file' inside double quote"--%>
<div ng-include="'ngApps/fsrCascadeDropdown.html'"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<p>
<label for="<%:Scheduled_Date.ClientID %>">*Scheduled Date:</label>
</p>
</div>
<div class="col-md-3 col-sm-3">
<asp:TextBox ID="Scheduled_Date" runat="server" CssClass="Scheduled_Date form-control" Enabled="False"></asp:TextBox>
</div>
<div class="col-md-5 col-sm-5">
<asp:RequiredFieldValidator ID="valReqCallDate" ControlToValidate="Scheduled_Date" runat="server" ErrorMessage="Scheduled Date is required">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator runat="server" ID="valRegExCallDate" ErrorMessage="Please enter a valid date" ValidationExpression="^(((0?[1-9]|1[012])/(0?[1-9]|1\d|2[0-8])|(0?[13456789]|1[012])/(29|30)|(0?[13578]|1[02])/31)/(19|[2-9]\d)\d{2}|0?2/29/((19|[2-9]\d)(0[48]|[2468][048]|[13579][26])|(([2468][048]|[3579][26])00)))$"
ControlToValidate="Scheduled_Date">*</asp:RegularExpressionValidator>
</div>
</div>
Angular Template Partial (.Html)
<div ng-controller="ufsrController as ufsrCtrl">
<div class="container" ng-disabled="ufsrCtrl.disableFSR == 'true'">
<div class="row">
<div class="widget-body">
<div class="col-md-6 col-sm-6">
<div class="row" ng-show="ufsrCtrl.showFacility">
<div class="col-md-4 col-sm-4">
<label class="form-label">Facility:</label>
</div>
<div class="col-md-6 col-sm-6">
<select ng-model="ufsrCtrl.facility" name="facility" ng-options="fac.FacilityID as fac.FacilityName for fac in ufsrCtrl.facilities" ng-disabled="(ufsrCtrl.facilities === undefined || ufsrCtrl.facilities.length <= 0)" ng-change="ufsrCtrl.facilityChanged()"
class="form-control"></select>
</div>
<div class="col-md-1 col-sm-1">
<i ng-show="ufsrCtrl.facilities === undefined || ufsrCtrl.facilities.length <= 0" class="fa fa-refresh fa-spin"></i>
</div>
</div>
<div class="row">
<input type="text" name="service" ng-model="ufsrCtrl.service.ServiceName" style="display:none" />
<div class="col-md-4 col-sm-4">
<label class="form-label">Service:</label>
</div>
<div class="col-md-6 col-sm-6">
<select ng-model="ufsrCtrl.service" name="serviceId" ng-options="item.ServiceName for item in ufsrCtrl.services track by item.ServiceID " ng-disabled="(ufsrCtrl.services === undefined || ufsrCtrl.services.length <= 0)" ng-change="ufsrCtrl.serviceChanged()"
class="form-control">
<option value="">-- Choose Service --</option>
</select>
</div>
<div class="col-md-1 col-sm-1">
<i ng-show="ufsrCtrl.services === undefined || ufsrCtrl.services.length <= 0" class="fa fa-refresh fa-spin"></i>
</div>
</div>
<div class="row">
<input type="text" name="role" ng-model="ufsrCtrl.role.RoleName" style="display:none" />
<div class="col-md-4 col-sm-4">
<label class="form-label">Role:</label>
</div>
<div class="col-md-6 col-sm-6">
<select ng-model="ufsrCtrl.role" name="roleId" ng-options="item.RoleName for item in ufsrCtrl.roles track by item.FacilityServiceRoleID" ng-disabled="(ufsrCtrl.roles === undefined || ufsrCtrl.roles.length <= 0)" ng-change="ufsrCtrl.roleChanged()" class="form-control">
<option value="">-- Choose Role --</option>
</select>
</div>
<div class="col-md-1 col-sm-1" title="select a Service to dismiss me">
<i ng-show="ufsrCtrl.roles === undefined || ufsrCtrl.roles.length <= 0" class="fa fa-refresh fa-spin"></i>
</div>
</div>
</div>
</div>
</div>
I eventually used javascript to find the angular dropdowns by their IDs, get their values and update some hidden inputs on post. It may not be elegant but worked.