I want to change the content of a selectbox based on a radio button.
I'm using AngularJS. So, my select box looks like this:
<select ng-controller="MyController">
<option ng-repeat="o in array_of_values" value="{{o.id}}">{{o.value}}</option>
</select>
Now, depending on wether my radio button is checked or not, I want a different set of values loaded in the select box.
I don't have much experience with Angular, but I suspect I could dynamically change $scope.array_of_values in MyController. Something similar to this example (official documentation)
I've seen another example, where you can change the content of a div based on a radio button, just using ng-model + ng-show
EDITED: But I have another difficulty: I really have several pairs radio button / select box, as table's rows, and they are dynamically generated. I could use plain jQuery plus a javascript function to get the id of each radio button and just change a specific select box based on the onClick event of the radio button. But I tend to think there is a more elegant way to do this, using AngularJS. Am I right?
Any clues? What approach should I follow?
Many thanks in advance
You should start by reading the doc and pick the right components.
Select angular way: https://docs.angularjs.org/api/ng/directive/ngOptions
Radio: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
$watch the radio models and change the array_of_values values. Prefer use object agains values ({id:0, value:"value0"}).
$scope.radio = {name:"Radio1"};
$scope.$watch('radio', function(newVal, lastVal){
if(newVal.name === 'radio2')
$scope.array_of_values = values2
};
});
Related
I need help with the following scenario:
I use a single-select dropdowns in a table. Each row has its own dropdown.
Now there are 2 options for changing the selection:
Click on deselect ('x') icon (works ok - via ng-change).
Open the dropdown, choose another value from list. Override the previous value (although ng-change fires, I have no way to know if it's a new value or a overriding value).
I wish to disable the second behavior. Is it possible to 'tell' chosen that once a value was selected, the only way to re-select a new value is to click on 'x'?
e.g: once a value was selected, disable the dropdown, hide the 'arrow' icon, but keep the 'x' deselect icon active?
<select chosen
allow-single-deselect="true"
placeholder-text-single="'Select'
ng-model="row.userSelection"
ng-options="field as field.name for field in vm.fields">
<option value=""></option>
</select>
Thanks.
Add an ng-disabled="$ctrl.model" will disable the select until the "x" clears the $ctrl.model. Once cleared the select will be Reenabled and a new selection can be made.
The only thing I can think of after taking a quick look, is to convert from ng-options to and use ng-disabled on the actual option element. The documentation says that you can hide disabled options, so if for example you were to select OPTION1 and OPTION[2-4] were disabled, they would be removed from the list.
I found a plunker with version 1.0 but it doesn't work. Making options distabled still shows them in the list, although it makes them undefined when you select them. Maybe a newer version is updated to actually remove them.
I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.
I have a <select> element in my HTML that is bound via ng-model to an object in the scope.
Initially I want the dropdown to read "Group..." but when the user clicks on the control I want "Group..." to be renamed to "All" so that "Group..." can never be selected, in the same sense that sites use text boxes with default text that gives you a hint to what the form is for and disappears when it gets user focus (e.g. A "Search..." field).
Here is my JSFiddle example which isn't working as I expected: http://jsfiddle.net/TXPJZ/561/
I figured that ng-onclick="myOptions[0].label = 'All'" would work, it should change the value of the data structure that populates the dropdown and thus change the dropdown options but it doesn't.
How do I make this work like I want?
ng-click is the directive you want, not ng-onclick. Using that it seems to work the way you want it to:
http://jsfiddle.net/TXPJZ/562/
i have this dropdown list,
a,b,c,
and 2 radio buttons rdbButton1 and rdbButton2.WHen i click on rdbButton1 dropdownlist will appear and when i click on rdbButton2 i have to set dropdownlist value as a.how can i change dropdownlist value (i want to change it in javascript or jquery)
$('#id_of_the_option_element').val('new_value');
$('#id_of_the_option_element').html('new_caption');
$('#id_of_the_option_element').attr('selected','selected');
search how autoid works by searching "autoID asp.net" on google. This may help, too.
http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx
you should go to the source view to check how the ID's of the html elements change.
Just wondering if there is a system out there that will basically allow for the following :
Displaying a grid of hours in a week that a user can click on to select and reclick to deselect and when the form is submitted it will send the blocks off to MySQL to store.
Since I havent done this before Im not sure on the best course of action, intial thoughts were to load up a pixel.gif and use onclick to tally clicks but before I reinvent the wheel as a square I thought it best to ask questions first to save trouble later.
You could create a table where the checked td's have one class and the unchecked td's have another class, and all of them have a unique ID. Then set the onclick action for each of the two classes to send the id of the td as an argument to a javascript function that uses ajax to update the database and changes the class of the td to selected or unselected.
The html would look like:
<td id='19_09_2011_12am' class='unselected_td'/></td>
<td id='19_09_2011_12am' class='selected_td'/></td>
The css would look like:
.unselected_td{background-color:blue;}
.selected_td{background-color:yellow;}
And the javascript:
$('.unselected_td').click(function(){
var cell = this.id;
$.ajax({
type:'post',
url:'path/file.php',
data:"cell="+cell+"&checked=1",
success:function(){
$(this).removeClass('unselected_td').addClass('selected_td');
}
});
});
And vice-versa for the selected ones, sending a 0 to the server instead. I'm not 100% sure about the syntax I used in the jquery, but the idea of this should work
I think the easiest way to achieve this would be to use buttons or checkboxes to represent the dates/hours selected. Checkboxes would be the simplest, since they could just be set to a value of '1', and only the selected checkboxes would show up as $_POST variables when you submit the form.
Buttons could have more style applied to them, but you would have to use some javascript code to toggle the value and style of the button when it's clicked. This is very easy to do in jQuery.