i'm a newb in angular and have some trouble to figure out how to use the values from ng-model in the correct way.
I made two drop-down lists and want to create a dependence between these two. The second list shall be displayed, depending on the user input of the first.
In this case the user shall select the kind of fermentation of a beer (here Obergärig for top-fermented) and the second drop-down should only be shown if the user took 'Obergärig'. I tried it with ng-show, but it doesn't work and i have no idea why or even if i use it the right way.
I would be very thankful if someone could give me a short explanation what i'm doing wrong.
Html for the first drop-down:
<div ng-controller="BierController">
<select ng-model="Bierart" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>
Html for the second drop-down:
<div ng-controller="OberController" ng-show="Bierart == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
And here's the .js:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];});
app.controller("OberController", function($scope) {
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});
That's my first post here, so i'm thankful for every advise to improve the quality of this post. Also, please excuse my bad english.
Just do the next steps:
Use the same controller for both selects.
Create some $scope variable to save the condition of the first select.(e.g. $scope.selectedBeer)
Set the condition i ng-show property of the second select.
Example:
JS file:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];
$scope.selectedBeer = "";
});
HTML file:
<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>
<div ng-controller="BierController" ng-show="selectedBeer == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
I may have done some syntax mistakes as I was coding this without any IDE, but the main idea is described. Good luck!
Your selects have to be managed by one controller. So, your code should look like:
<div ng-controller="BierController">
<select ng-model="Bierart" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
<div ng-show="Bierart === 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
</div>
.js:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});
Here's the new html:
<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</br>
{{selectedBeer.name}}
<div ng-show="selectedBeer == 'Obergärig'">
<select ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</br>
{{selectedBeer.name}}
</div>
And the .js
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];
$scope.selectedBeer = "";
});
Thanks for the advise, i'll install ng-inspect FF.
Related
I am trying to add an input box to the DOM based on the user selection:
option1 other option 3 otherwise remove input box from dom, how can do it, i tried bellow code but it is not working?
html--
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select> <p ng-if="myDropDown=='two' || ans=='three'">
<input type="text" ng-model="fname" name="fname" />
</p>
jsFiddle-->http://jsfiddle.net/EZbfM/717/
The reason ng-if is behaving unexpectedly is because you seem to have referenced an ancient version of AngularJS (1.0.2). If you update it to a more recent version, ng-if will work as expected.
See the link here for the issue related to the evaluation issue of ng-if: https://github.com/angular/angular.js/pull/4005
Do you want to show it when the dropdown is on one or on three, otherwise not?
change
<input ng-if="myDropDown=='two'" type="text">
to
<input ng-hide="myDropDown=='two'" type="text">
It will always render then, but only show if the option chosen is one or three
If I understand well, you are trying to display an element based on myDropDown value. You can write complex expressions as && or || in ng-show with the following synthax:
<div ng-show="myDropDown == 'two' || myDropDown == 'three'">
<!-- Will be displayed only when you select 'two' or 'three' -->
<input type="text" ng-model="fname"/>
</div>
Fiddle with ng-show
Fiddle with ng-if
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope',function($scope) {
}]);
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<p ng-if="myDropDown=='two' || myDropDown=='three'">
<input type="text" ng-model="fname" name="fname" />
</p>
</div>
Here is working fine..
var app = angular.module('exApp', []);
app.controller('ctrl', function($scope){
$scope.myDropDown = "one";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<div>
<select data-ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<p>
<input ng-model="comment" ng-if="myDropDown != 'two'" type="text"> </p>
</div>
</body>
I want to make my 2 <select> change their values based on a single <select>, for example:
I want my kodethnajaran and kodesemester change their options value based on my selection on kodematkul.
Here is my code:
<div class="form-group">
<label>Mata Kuliah</label>
<select class="form-control" name="kodematkul" id="kodematkul" required>
<option value="null" selected="selected">-- Pilih --</option>
<option value='mk001'>Mobile Programming</option>
<option value='mk003'>Matematika Dasar</option>
<option value='mkl001'>Logika dan Pemrograman</option>
</select><br>
</div>
<div class="form-group">
<label>Tahun Ajaran</label>
<select class="form-control" name="kodethnajaran" id="kodethnajaran" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='thn001'class='mk001'>2017</option>
<option value='thn001'class='mk003'>2017</option>
<option value='thn001'class='mkl001'>2017</option>
<option value='thn002'class='mk003'>2016</option>
</select><br>
</div>
<div class="form-group">
<label>Semester</label>
<select class="form-control" name="kodesemester" id="kodesemester" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='sem002'class='mk001'></option>
<option value='sem001'class='mk003'></option>
<option value='sem001'class='mkl001'></option>
<option value='sem002'class='mkl001'></option>
<option value='sem002'class='mk003'></option>
</select><br>
</div>
The code above basically contains only my <select>, with data from sql. The script that I tried is:
$("#kodethnajaran,#kodesemester").chained("#kodematkul");
I'm not sure if this is applicable, because I tried to implement it based on this demo:
http://www.appelsiini.net/projects/chained/demo.html
it seems it can only change 'kodethnajaran' but doesnt change 'kodesemester' value.
Here's the fiddle...
https://jsfiddle.net/vu671ubm/
Ok so I investigated a little and the reason why your solution was not working as in example was jQuery version, You should use 1.10 to have chained working
Here goes codePen http://codepen.io/kejt/pen/NdzZqv?editors=1111
Also I have changed your code a little to work on classes
$(".form-control").each(function() {
$(this).chained($("#kodematkul"));
});
The class I have used is just an example, you can add new class for all selects that need to depend on given one. For example dependant-select and add this class to all select which should change on the first one update
I am trying to build an app that let people choose a license and the price is different for different licenses. I want a real-time price update on the page of the product. Here is the reference that I took for the below code: https://stackoverflow.com/a/6740218
Code:
<script type="text/javaScript">
var price = {"3":"11","2":"500","1":"1000"};
$(function() {
$('select[name=dropdown_price_change]').change(function() {
document.getElementById('price_disp').innerHTML = price[$(this).val()];
});
// Trigger on dom ready
$('select[name=dropdown_price_change]').change();
});
</script>
<div class="product-price" id="price_disp">
<form class="cart nobottommargin clearfix" method="get">
<div class="quantity clearfix">
<select id="dropdown_price_change" name="dropdown_price_change" class="form-control">
<option value="3">Personal License</option>
<option value="2">Small Firm License</option>
<option value="1">Enterprise or Developer License</option>
</select>
</div>
</form>
</div>
Thanks in advance. ;)
innerHtml should be innerHTML and frankly, you should probably be using textContent instead of innerHTML in this case anyway since the values of the select don't contain any HTML.
Also, you shouldn't trigger the change function on document ready because the user will never get to see and use the dropdown list that way.
Lastly, add a "dummy" choice to the list as the default choice so that the user must change the value if they want to select "Personal License" from the list. Without this, the change event won't trigger because that was the default choice in the first place.
var price = {"3":"11","2":"500","1":"1000"};
$(function(){
$('select[name=dropdown_price_change]').change(function(){
document.getElementById('price_disp').textContent = price[$(this).val()];
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-price" id="price_disp">
<form class="cart nobottommargin clearfix" method="get">
<div class="quantity clearfix">
<select id="dropdown_price_change" name="dropdown_price_change" class="form-control">
<option value="">-- Select an Option --</option>
<option value="3">Personal License</option>
<option value="2">Small Firm License</option>
<option value="1">Enterprise or Developer License</option>
</select>
</div>
</form>
</div>
I am trying to get only the checked names in a list of names. Here is my code model:
<select ng-model="selectTopic" ng-change="changedTopic(selectTopic)" ng-options="option as option for option in topics">>
<option value="" disabled>Select a Subject</option>
</select>
<select ng-model="selectDept" ng-change="changedDepartment(selectDept)" ng-options="option as option for option in department">
<option value="" disabled>Select a Department</option>
</select>
<select ng-model="selectUser" ng-options="option as option for option in users" multiple="multiple">
<option value="" disabled>Select a User</option>
</select>
I want to get the selected topic, department, and users. I am currently using: console.log($scope.topics + $scope.departments + $scope.users) but it returns everything. I just want to return the selected items.
Can anyone help me out?
You have to print the ng-models , not the arrays:
console.log($scope.selectTopic);
console.log($scope.selectDept);
console.log($scope.selectUser);
Hope it helps =)
use one object for the model in your form , then you have all the user input in that one object which makes it simple to send to server or to reset form
$scope.userInput={}
<select ng-model="userInput.selectTopic" ng-change="changedTopic(userInput.selectTopic)" ng-options='...'>
<select ng-model="userInput.selectDept" ng-change="changedDepartment(userInput.selectDept)" ng-options='...'>
to see this working put the following in your view temporarily
<pre>{{userInput|json}}</pre>
I am trying to add two select2 multi-value select boxes to my Rails app.
The top form works fine, but the bottom one does not work.
I experimented with changing ids and adding new js code, but no success. Is there something fundamentally wrong that I'm missing?
Index.html
# This one works fine
<div class="search_genre">Genre:</div>
<div class="select2-container select2-container-multi populate">
<select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
<optgroup label="Popular">
<option value="Alt">Rock</option>
<option value="Ind">Indie</option>
<option value="Ind">Alternative</option>
<option value="Ind">Acoustic</option>
</optgroup>
</select>
</div>
# This one doesn't show a text input or the optiongroup values
<div class="search_region">Region:</div>
<div class="select2-container select2-container-multi populate">
<select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
<optgroup label="Local">
<option value="PDX">Greater Portland</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
</div>
application.js
$("#e9").select2();
You can not have two elements with the same id. Use classes instead.
Both your selects have id="e9" instead try adding something like class="my-select" to your <select> element.
then do $('.my-select').select2();
For each select2 in the same page you must define unique id for tag "data-select2-id".
data-select2-id="Project"
and
data-select2-id="WBSDate"
As #Ramy Mention. I hope its works fine for everyone.
If It won't work then try this.
In select box you can't use same id for an example:
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
If you have same id the search box won't work.
Just try to different Id Name like below.
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
<select class="form-control select2" id="select1">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
I faced this kind of problem. That's why i shared here my opinion.
Thanks hope someone will get help from this.
Ok, so it was something fundamental!
The id's were both the same. This seemed odd to me, and was the first thing that I changed to see if it would work. I added a new jquery code to application.js with id #e10 and changed teh second form's id accordingly. Yesterday, this didn't work. However, today it did. I must have missed something silly, like saving the page...
I wish SO allowed you to delete answers.
Using identical data-select2-id property solve the problem.
MVC input helpers throws sytax error for hyphen, replace the hyphen with underscore, and salute.
#Html.ListBoxFor(x => x.WIds, WList, new { #class = "form-control opWflWafers", #multiple = "multiple", data_select2_id=identicalname })
<div class="float-left col-sm-3">
<select class="form-control" id="parentesco" name="parentesco[]" required></select>
</div>
<script>
$('#parentesco*').select2({
placeholder: 'Seleccionar paciente',
ajax: {
url: 'ajax_paciente.php',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data
};
},
cache: true
}
});
</script>