I have two selects one for classes and another for teachers as follows,
<label for="">Select Class</label><br>
<select ng-model="currentClass" ng-options="class as class.name for class in classes" ng-change="listTeachers()">
<option value="">Select Class</option>
</select>
<label for="">Select Teacher</label><br>
<select ng-model="currentTeacher" ng-options="teacher as teacher.name for teacher in teachers" ng-change="showStudents()">
<option value="">Select Teacher</option>
</select>
My problem is, if choose class and then choose teacher it's fine, but after choosing teacher if again I choose another class then I want to set 2nd select a value as "select teacher", how to do it?
Also tell me, is there any way of setting default value instead of setting it through option tag?
in your controller on the listTeachers() function you need
to set the model on the value you desire, example:
vm.listTeachers = function() {
vm.currentTeacher = '';
... // rest of your code
}
so when ever you change your class it invokes listTeacher, and i will reset the value, hope this helps.
Related
How can I do when the option is selected the function will be called with the parameters that I pass? I can't put the javascript function on select itself because I'm using foreach to fill my option and I also need to get my parameter defends on one column on my query
Example:
<select name="request_type" id="request_type" class="form-control" required onchange="approval(<?php()?>)">
<option value="">Select Request Type</option>
#foreach($types as $type)
<option value="{{ $type->id ?? ''}}" // if selected function call(true/false)>{{ $type->name ?? ''}}</option>
#endforeach
</select>
after calling the #foreach there will I know the column im basing whether I will pass true or false on my function on javascript. Can anyone help me on this? The column itself is a boolean.
Thank you.
EDIT
I want to do this without using ajax. is there any other way?
Just trigger select change function on document ready, like mentioned in code. And for custom parameter in option add custom attribute in option like data-parameter and get value of that in change function. example
$(document).ready(function(){
$('#dropdown-id').change()
})
function callFunction(dropdown){
var selectedOption = $(dropdown).find('option:selected')
var customParameter = $(selectedOption).attr('data-parameter')
console.log(customParameter);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown-id" onchange="callFunction(this)">
<option value="1" data-parameter="false">One</option>
<option value="2" selected data-parameter="true">Two</option>
<option value="3" data-parameter="abc">Three</option>
</select>
So I have an AngularJS form with a select option to create an restaurant in my DB;
<div id="name-group" class="form-group" ng-init="getClasses();">
<div class="select-wrapper">
<label for="location">Resaurant Class</label>
<select name="class" ng-model="formData.class" ng-options="class.id as class.name for class in classes track by class.id">
<option value="">-- Select Class --</option>
</select>
</div>
</div>
From the above, I'm getting the classes and then listing them. Because I have track by class.id it means I can have a default option as it doesn't have a value. All good here.
Now to edit this restaurant, I retrieve it from the DB and it will have whatever class I have saved for it from the above form. This is the id of the restaurant class.
So restaurant.restaurant_class_id = class.id
Now when I retrieve the restaurant, using the code below I'm able to load the form and the restaurant class will be selected correctly;
<div id="name-group" class="form-group" ng-init="getClasses();">
<div class="select-wrapper">
<label for="location">Resaurant Class</label>
<select name="class" ng-model="restaurant.restaurant_class_id" ng-options="class.id as class.name for class in classes track by restaurant.restaurant_class_id">
<option value="">-- Select Class --</option>
</select>
</div>
</div>
Notice the track by restaurant.restaurant_class_id. This is the desired behaviour.. Load the form, load the restaurant, load the restaurant classes, and automatically set the corresponding restaurant class in the dropdown.
Now the problem is when I then want to select another restaurant class for the restaurant. This results in an undefined value.
If I remove track by restaurant.restaurant_class_id and replace it with track by class.id two things happen;
The restaurant class is not selected. So I end up with -- Select Class -- displayed which is the default
If I select a restaurant class from the drop down then the value is set correctly.
I'm using ng-inspector to check what value is being set on the $scope
So I guess my question is how can I select the correct restaurant class based on what is retrieved from DB and be able to change it without getting undefined value.
Any guidance from Angular gurus appreciated.
Yes. Db value automatically selected by model. Check whether u have another issue
I'm new to AngularJS, so I apologize if this question is naive.
We have cascading selects that populate as you select values. When the value of Select A changes, the values in Select B also change since they filter based on the value in Select A.
So here is the scenario:
Choose option from Select A
Choose option from Select B
Change selection for Select A
Observe that options in Select B update accordingly.
Observe that bound model for Select B does not update accordingly.
This seems so basic that we are really scratching our heads. What is the point of two-way data binding if this scenario isn't covered?
Here is my view:
<body ng-controller="MainCtrl">
Make:
<select ng-model="makeng" ng-options="option.value as option.display for option in makes">
<option ng-disabled="true" ng-selected="true" value="">Select a make</option>
</select>
<br />
{{makeng}}
<br /> <br />
Model:
<select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}">
<option ng-disabled="true" ng-selected="true" value="">Select a model</option>
</select>
{{modelng}}
</body>
Here's a Plunkr, demonstrating:
http://plnkr.co/edit/9XrKgW?p=preview
P.S. The above example is purely fictional and forked from another plunkr. Just the easiest way to demonstrate what we are seeing.
This is how it is supposed to work. The select control changes the model in response to a user's selection, but if you change the set of allowed values from underneath it (i.e. by filtering out) it keeps the model intact.
The way to make this work is by invalidating the model in response to a change in Select A:
Make:
<select ng-model="makeng"
ng-options="option.value as option.display for option in makes"
ng-change="modelng = undefined">
<option value="">Select a make</option>
</select>
<br />
Model:
<select ng-model="modelng"
ng-options="option.display for option in models | filter:{make:makeng}">
<option value="">Select a model</option>
</select>
Hey guys just been told that hide cannot be used cross browser for select element options.
So I am wondering how I can use disable for the following issue I am having.
This example is simplified, the actual code contains PHP loops and MySQL to display the options and content.
Okay so first of all I have these two select elements:
<select class="form-control select-box">
<option value="make-any">Make (Any)</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<select class="form-control select-box-model">
<option value="make-any">Make (Any)</option>
<option value="C220">C220</option>
<option value="X1">X1</option>
<option value="X5">X5</option>
<option value="XC90">XC90</option>
</select>
I then have these list:
<div class="makes BMW X1">
<ul>
<li>BMW</li>
<li>X1</li>
</ul>
</div>
<div class="makes VOLVO XC90">
<ul>
<li>VOLVO</li>
<li>XC90</li>
</ul>
</div>
<div class="makes MERCEDES C220">
<ul>
<li>MERCEDES</li>
<li>C220</li>
</ul>
</div>
<div class="makes BMW X5">
<ul>
<li>BMW</li>
<li>X1</li>
</ul>
</div>
I am currently using this jQuery to hide the div with the class of 'makes' if the selected option doesn't match the div's class so for example 'BMW':
<script>
$(document).ready(function(){
$('.form-control').change(function(){
var make = $(this).val();
if(make != 'make-any'){
$('.makes').hide();
$('.'+make).show();
} else {
$('.makes').show();
}
});
});</script>
So as you can see I have a bit of a problem because the second select element with the class of "select-box-model" contains all of the models, I'd like to disable the options that aren't associated with the first select element option that has been selected.
For example the list containers contain the classes for the 'Make' and 'Model' of the each vehicle:
<div class="makes BMW X5">
So how can I disable the options that are not associated with that 'Make', for example if the user selects BMW for the first element I'd only like the 'Models' that are associated with the 'Make'.
Any examples would be great, thanks.
Well, I am not completely certain that I have understood your question.
But I am assuming that you mean that if you select a car brand from select one (form control) the available models should be enabled in select two select-box-model. Once selecting the model, the accurate div needs to be shown?
If that is what you're trying to do your markup is not the best structure to achieve that.
Never the less, I made an example using your mark up:
jQuery:
$('.select-box-model').prop('disabled',true);
$('.form-control').on('change',function(){
$('.select-box-model').prop('disabled',false);
if($(this).val() != 'make-any'){
$('.makes').hide();
//check if the models drop down is used
if($(this).hasClass('select-box-model')){
//get selected value
var value = $(this).val();
$('.'+ value).show();
return false;
}
//get selected value
var carBrand = $(this).val();
$('.select-box-model option').prop('disabled',true);
$('.'+ carBrand).find('li').each(function(){
if($.trim(carBrand) != $.trim($(this).text())){
$('.select-box-model option[value="'+ $(this).text() +'"]').attr("disabled", false);
}
});
}
});
Here's a fiddle of that: http://jsfiddle.net/z59v56ec/
A neater solution to achieve this is using ajax to populate the models of the car brand.
But if you really want to do it your way, then the following logic is easier.
Select one holds value of car brand
Select two holds value of car brand and the text is the model
Select one will enable the options in select two with the value of that car brand
On select a model in select two the accurate divs would be shown according to the option text.
On a sidenote, be careful with your references. VOLVO is not the same as Volvo.
Just in case I completely missed the point - sorry! :)
First, you are far better off creating multiple selects and toggling their display based upon your first select's selectedvalue. Then, you create multiple divs and toggle their display based on your second select's selectedvalue. That said, if you really want to attack this "dynamically", you're better off having two selects - and one unordered list - and clearing their contents and rewriting the html as you go:
<select class="form-control select-box" id="selectMake">
<option value="make-any">Make (Any)</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<select class="form-control select-box-model" id="selectModel">
</select>
<ul id="ulCars">
</ul>
$("#selectMake").change(function(){
$("#selectModel").empty();
$("#ulCars").empty();
switch ($(this).val()){
case "BMW":
$("#selectModel").append("<option>X1</option>").val("X1");
$("#ulCars").append("<li>X1</li>");
break;
}
});
etc. etc., but you can easily clear lists and dropdowns - and then repopulate them. But like I said, I'd go with multiple divs and toggling their display.
In Angularjs, binding input select to the model creates new empty option
<option value="? undefined:undefined ?"></option>
And this is the code
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
Is this normal? It doesn't seem to be something good looking.
Make sure you have initialized your model variable with one of the option value.
Try this
Controller
$scope.hotspot = {};
$scope.hotspot.category = "Culture";
HTML
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>