Below is my code,
<div ng-dropdown-multiselect options="master_days_name" selected-model="selected_days_name" ></div>
<select name="end_time" ng-model="PostJobData.facility_hours.end_time" data-bvalidator="required" class="form-control" data-bvalidator-msg="Required">
<option value="">End Time</option>
<option ng-repeat = "val in time_array" value="{{val}}">{{val}}</option>
</select>
Add More
Current Result
Now I want, if user click to add more then this dropdown get repeated, with tuesday, wednesday, saturday, sunday(with uncheck values)
Add more functionality
<div class="row dobBlock" ng-repeat="(hours_key,hours_value) in PostJobData.facility_hours">
<div ng-dropdown-multiselect options="master_days_name" selected-model="selected_days_name" ></div>
</div>
Js code
$scope.PostJobData.facility_hours = [];
$scope.addMoreFacilityHours = function()
{
var temp = {'days':[],'start_time':'', 'end_time':'' };
$scope.PostJobData.facility_hours.push(temp);
console.log($scope.PostJobData.facility_hours);
}
But this giving same array clone means I want to show only uncheck option in second select box how can do this ?
Result
Related
The below is my 3 drop down section.I want to change in the 3rd drop down which having the values AND/OR. After changing the drop down there will be another clone of all the 3 same drop down filed will come and condition is only in the clone section for first select field the value shouldn't be there which was previously chosen(If I choosen Category in first select, then in the clone section for first select field there willn't be any Category section).
Also as per there is 3 option value in first select and those are (Category, Genre and Cast), so while on changing the AND/OR section we can only clone 2 more div, except the first one.
Also, if we already chosen Category section in first section and then we choose AND/OR option field then other 2 option will vanish from the first select field. Similarly it will proceed like this
I have got some how to clone it, but can't do exactly what our requirement. Below is my HTML and js code.
**HTML**
<div class="radio">
<input type="radio" id="test2" name="specific_content" value="2">
<label for="test2">
<div class="col-md-4">
<select class="form-control" id="content-form" name="content_form">
<option selected disabled hidden>Select</option>
<option value="category">Category</option>
<option value="genre">Genre</option>
<option value="cast">Cast</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control content-type-section" id="content_type" name="content_type" disabled="disabled" onchange="removeDisableFromCondition(this)">
<option selected disabled hidden>Select</option>
<option value="123">Movie</option>
<option value="321">TV</option>
<option value="345">Cast</option>
<option value="987">Genre</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control condition-section" id="sel1" name="conditions" disabled="disabled" onchange="showAnotherSection()">
<option selected disabled hidden>Select</option>
<option value="1">AND</option>
<option value="2">OR</option>
</select>
</div>
<div id="cloned_copy">
</div>
JS
$(document).ready(function() {
$('#sel1').change(function() {
var selectedVal = $('#content-form').val();
var target = $("#cloned_copy");
target.empty();
$("#content-form").clone().appendTo(target);
$("#cloned_copy option[value='"+ selectedVal +"']").remove();
});
});
After choosing AND/OR select drop down
I have two dropdowns (select in HTML), when I select the option in the first dropdown it has to fill the second according to the id of the selected item of the first. It's doing well at removing all the previous options and filling with the id selected in the first dropdown, however it's not removing the text appearing as selected. I'm stuck at the version 1.11 of Jquery if it matters somehow. I've tried doing this both through Jquery and Javascript.
Here is the html code where the selects are:
<div class="ui-grid-a">
<div class="ui-block-a uf">
<label for="cpEstado" class="select">
<select name="estado" id="cpEstado" data-theme="c"> <!--onchange="appUsuario.buscarCidades( this.value );">-->
<option value="" disabled selected>UF</option>
</select>
</label>
</div>
<div class="ui-block-b cidade">
<label for="cpCidade" class="select">
<select name="cidade" id="cpCidade" data-theme="c">
<option value="1" disabled selected>Cidade</option>
</select>
</label>
</div>
Here is the Jquery function I used to fill the second dropdown:
$(document).on('change', '#cpEstado', function() {
$('#cpCidade').empty();
appUsuario.buscarCidades( this.value );});
When I changed the text of the selected text,
$("#cpCidade option:selected").html('Mudança de valor');
This happened. It changes the text of the item in the dropdown but not in the selected item:
You should be setting the value of the second dropdown (instead of setting the html content of the selected option):
$("#cpCidade").val('{id}');
Where id = the value of 'Mudança de valor'
I am trying to create a webpage where the content changes depending on which drop down options the user has selected. Once the user has made his first choice, the content of a drop down menu can be an additional nested drop down menu with another choice the user must make.
I am now trying to figure out how I can pre-select options by passing parameters in the URL for both the first drop down and a number of nestet drop downs.
I have the basic functionality down. Here's my HTML:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js_select.js"></script>
<script type="text/javascript" src="js_drop.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<select id="select" class="div-toggle" data-target=".my-info-1">
<option id="one" value="noselection" data-show=".noselection">
Choose option
</option>
<option id="two" value="2015" data-show=".2015">
2015
</option>
<option id="three" value="2014" data-show=".2014">
2014
</option>
</select>
<div class="my-info-1">
<div class="noselection hide">
No choice made
</div>
<div class="2015 hide">
2015
</div>
<div class="2014 hide">
A nested drop down within the 2014 selection:<br><br>
<select id="select" class="div-toggle" data-target=".my-info-2">
<option id="one" value="noselection2" data-show=".noselection2">
Choose option
</option>
<option id="two" value="s1" data-show=".s1">
January
</option>
<option id="three" value="s2" data-show=".s2">
February
</option>
</select>
<div class="my-info-2">
<div class="noselection2 hide">
No choice made
</div>
<div class="s1 hide">
Information about January
</div>
<div class="s2 hide">
Information about February
</div>
</div>
</div>
</div>
Here's my css.css:
.hide {
display: none;
}
And here's js_drop.js that makes content appear depending on the user selection. I found the script here: Change the content of a div based on selection from dropdown menu:
$(document).on('change', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('change');
});
I am now adding functionality to make it possible to link to a specific drop down selection and any nested selections by adding parameters to the URL, like in:
http://example.com/page.html?select=three&selectnested=two
I am using js_select.js for this function. I found the code here: How to create a hyperlink that directs to a page with pre-selected option in a drop-down menu?
$(document).ready(function() {
var select = GetUrlParameter("select");
$("#" + select).attr("selected", "");
});
function GetUrlParameter(name) {
var value;
$.each(window.location.search.slice(1).split("&"), function (i, kvp) {
var values = kvp.split("=");
if (name === values[0]) {
value = values[1] ? values[1] : values[0];
return false;
}
});
return value;
}
My guess at a solution would be to:
Change id on my second <select> to id="selectnested"
Add the following code to my js_select.js above the function
The code:
$(document).ready(function() {
var select = GetUrlParameter("selectnested");
$("#" + select).attr("selected", "");
});
But this solution does not choose a selection with-in the nested drop down when the page loads using my example URL above.
Any hint on solving this would be much appreciated.
The issue is that you have multiple elements with the same ID (both <select>s have the ID "select", the <option>s have repeated IDs "one", "two" and "three").
Change the IDs of the <select> and <option> elements so they don't conflict with each other.
Example:
<select id="select" class="div-toggle" data-target=".my-info-1">
<option id="select-one" value="noselection" data-show=".noselection">
Choose option
</option>
<option id="select-two" value="2015" data-show=".2015">
2015
</option>
<option id="select-three" value="2014" data-show=".2014">
2014
</option>
</select>
...
<select id="nested" class="div-toggle" data-target=".my-info-2">
<option id="nested-one" value="noselection2" data-show=".noselection2">
Choose option
</option>
<option id="nested-two" value="s1" data-show=".s1">
January
</option>
<option id="nested-three" value="s2" data-show=".s2">
February
</option>
</select>
This way, in your initialization function, you can do:
$(document).ready(function() {
// First selection menu options
var select = GetUrlParameter("select");
$("#select-" + select).attr("selected", "");
// "Nested" selection menu options
var select = GetUrlParameter("selectnested");
$("#nested-" + select).attr("selected", "");
});
And due to those prefixes (select- and nested-) jQuery will only find one element with that ID, and you'll hopefully have no more trouble!
"Can any body just let me know to call a function on change of select box inside ng-repeat, which sends back data that is available for second select box below first but not for all"
suppose I have 2 products
product 1
select1-on change of this
select2-this should change
product2
select1-on change of this
select2-this should change
but whats happening is
product 1
select1-on change of this
select2-is changing
product2
select1-
select2-this is also changing
can anybody help me with this?
I have a ng-repeat loop in which I have 2 select boxes, for first select box I am getting data from api call, when user changes any option from first select box I have to get code and match with its code entire data and supply options to second select box.
But the main problem entire thing I am looping in side ng-repeat so if there are 2 products or more on select of first select box from first product it changing all second select box data for all products.
Here is my code
<div class="" ng-repeat="product in products ">
<div ng-show="IsVisible" class="form-group row sub-div vsub-div-fw">
<div class="col-sm-6 fd">
<p class="cust-label" for="pay_opt">Select a plan.</p>
<select ng-change="getPaymentOptions(orders.selectedSub[$index],index)" ng-init="orders.selectedSub[$index] = product.recurrence[0].code" ng-model="orders.selectedSub[$index]" ng-options="sub.code as sub.name for sub in product.recurrence " class="input-lg form-control select-community-list" id="pay_opt">
<!-- <option value="">Select Subscription Plan</option> -->
</select>
</div>
</div>
<div class="form-group row sub-div vsub-div-fw">
<div class="col-sm-6 fd">
<p class="cust-label" for="">Select a payment option.</p>
<select required="required" ng-model="orders.selectedPayment[$index]" class="input-lg selectPaymentOption paymentOption{{$index}} form-control" id="" >
<option ng-init="orders.selectedPayment[$index] = product.payment_options[0]" ng-repeat="opt in product.payment_options" value="{{opt}}" class="myPaymentBox">{{opt.split("_").join(" ") }}</option>
</select>
<p id="paymentOptionErr{{$index}}" class="alert alert-danger product-error-msg"><i class="fa fa-exclamation-triangle"></i> Please select payment option to proceed.</p>
</div>
</div>
js code
$scope.getPaymentOptions=function(plan,i){
angular.forEach($scope.products,function(p){
angular.forEach(p.recurrence,function(r){
if (r.code==plan) {
p.payment_options=r.payment_type;
$scope.orders.selectedPayment[i] = r.payment_type[0];
};
});
})
}
The above function is called when we change first select box, to get options for second select box. but when we have more products, changing product one's first select box will change all second select box options. how to make unique on change function?
I am new to Angular and am trying to build a simple app to teach myself. I have the following select options which are displaying just the keys of a data object so far. What I want to do is show a value underneath the second select box for each team, which shows the value associated with the key when a first option is selected, then adds to that value when the second option selected. How do I do that in angular?
I tried {{v}} for just the first one but that didn't work, and I would still need to add the second one.
<div>Team 1</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem1">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
Player 2:
<select class="form-control" ng-model="selectedItem2">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
<!-- show value here -->
<br>
<br>
<br>
<div>Team 2</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem3">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>Player 2:
<select class="form-control" ng-model="selectedItem4">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
<!-- show value here -->
<div ng-show="k == v">{{v}}</div>
Values would go under the team two boxes.
UPDATE:
This worked for me!
$scope.calc = function() {
$scope.calculatedValue = Number($scope.selectedItem1);
if($scope.selectedItem2){
$scope.calculatedValue = Number($scope.selectedItem1) + Number($scope.selectedItem2);
}
}
$scope.calc2 = function() {
$scope.calculatedValue2 = Number($scope.selectedItem3);
if ($scope.selectedItem4) {
$scope.calculatedValue2 = Number($scope.selectedItem3) + Number($scope.selectedItem4);
};
}
<div>Team 1</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem1" ng-change="calc()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v" >{{k}}</option>
</select>
Player 2:
<select class="form-control" ng-model="selectedItem2" ng-change="calc()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
</select>
<!-- show value here -->
<p> Total Value: {{calculatedValue}} </p>
<br>
<br>
<br>
<div>Team 2</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem3" ng-change="calc2()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v" >{{k}}</option>
</select>Player 2:
<select class="form-control" ng-model="selectedItem4" ng-change="calc2()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
</select>
<!-- show value here -->
<p> Total Value: {{calculatedValue2}} </p>
I put together a fiddle based on your example. You need to add a change event to the select forms to tell your controller to calculate the values and create a new property on the $scope which stores the calculated value, which can be bound to in the html.
HTML
<select class="form-control" ng-model="selectedItem1" ng-change="calc()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
</select>
JS
// these should be set to default number values
$scope.selectedItem1 = 0;
$scope.selectedItem2 = 0;
$scope.data = {
playerInfo : {
a:1,
b:2,
c:3
}
};
// this method will calculate the value
$scope.calc = function(){
$scope.calculatedValue = parseFloat($scope.selectedItem1) + parseFloat($scope.selectedItem2);
}
One thing to note, you need to set the default values of selectedItem1 and selectedItem2 or the change event won't know how to calculate the non-numeric undefined values of the unchanged selects.
Here is a working example based on your code:
https://jsfiddle.net/gu9fm5xh/1/
so a couple of things,
First: using ng-repeat in options is usually not they way you want to go, you want to use ng-options on the select element. But this isn't a major problem.
<select class="form-control" ng-options="data.displayValue for data in data.playerInfo" ng-model="selectedItem4">
This will show on the select "data.displayValue" which can be any property on the playerInfo object. And it will set selectedItem4 to the actual data object.
Second: In your div you are using the k and v variables that are in your ng-repeat. ng-repeat creates its own scope and the scope variables k and v are not accessible outside of your repeat and each ng-repeat uses its own k and v. If you want to use the selected values outside of the ng-repeat you need to set them to scope variable. luckily with option you can do this my setting the value field.
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
ng-options does this for you behind the scenes. What this will do is bind your selects ng-model to the current option being shown. so if this option is under this select then selectedItem4 will be set to the value of the option selected.
<select class="form-control" ng-model="selectedItem4">
Meaning in your div if you change it to be
<div >{{selectedItem4}}</div>
This should work, a little better.