i want to create 2 select option which the content of the other one selected option based to previous option. here is my html
<div class="col-sm-2">
<select class="form-control" ng-model="y">
<option value="1">a</option>
<option value="2">b</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control" ng-model="z">
<option ng-repeat = "x in list" value="{{x.idproduct}}">{{x.descproduct}}</option>
</select>
</div>
but there is error, the other select option wont showing the option like in this picture
here is my js file
if ($scope.y === 1) {
$scope.list = [
{idproduct:"13", descproduct:"cc"},
{idproduct:"14", descproduct:"dd"}
];
}
if ($scope.y === 2) {
$scope.list = [
{idproduct:"15", descproduct:"ee"}
];
}
You need to bind the change event so that your list gets updated at the time that your value is updated. Plus your === can cause an issue. With === your string value is being compared to integers 1 and 2.
Here is a plunker: ng-change for change in dropdown
<select class="form-control" ng-model="y" ng-change="updateList()">
<option value="1">a</option>
<option value="2">b</option>
</select>
$scope.updateList()={
if ($scope.y == 1) {
$scope.list = [
{idproduct:"13", descproduct:"cc"},
{idproduct:"14", descproduct:"dd"}
];
}
if ($scope.y == 2) {
$scope.list = [
{idproduct:"15", descproduct:"ee"}
];
}
}
The value of your option is String value="2"
And you're comparing it to an Integer if ($scope.y === 2)
You should compare it like if ($scope.y === '2') or if (parseInt($scope.y) === 2)
Create a function and put your Js code in that function and call function on ng-change of the first dropdown. Here you if condition executes once during app initialization. So by triggering ng-change we can call function and update the lists based on the selection.
Related
So I want to set a value for ng-init if a specific option is selected. If that specific option is not selected yet, or is changed away from, I'd like to delete the ng-init value.
<select id="exSelect" onchange="checkButton()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<textarea type="text"
class="form-control"
ng-model="vm.request.description"
name="description" id="description"
rows="10" placeholder="Must be atleast 50 characters."
ng-minlength="50"
required>
</textarea>
function checkButton()
{
var dropdownValue = document.getElementById("exSelect");
if (dropdownValue.value == "3") {
//Why does this not work?
document.getElementById("description").ng-init = 'Example attribute setting';
} else {
document.getElementById("description").ng-init = '';
}
}
This code is super simplified example version of what I am working on right now, but overall a similar idea of what I am trying to do as a small part of a much larger program. So I would like for the checkButton() function to run each time a new option is selected. If 3 is selected, I would like the if statement to execute and set the "ng-init" attribute of the element with the Id of "description" as the text in the function. If another option is selected, I would like for the checkButton() function to run again and it will set the the ng-init attribute as empty.
First use the ng-model and ng-change directives:
<select id="exSelect" ng-model="vm.sel1" ng-change="vm.checkButton()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Then in your controller:
vm.checkButton = function() {
if (vm.sel1 == "3") {
vm.request.description = 'Example attribute setting';
} else {
vm.request.description = = '';
};
});
How can I avoid blank option in the form output?
<select class="form-control" ng-model="item.type" >
<option ng-value="0">Real</option>
<option ng-value="1">Fake</option>
<option ng-value="2">Both</option>
</select>
item.type is set in the controller
The issue slightly different from what I saw in similar topics because of usage of ng-value and the fact, that value of item.type is already set
Edit: Changing ng-value to value solved the issue.
How is item.type set in the controller?
The blank line is the current value of item.type. If you set it as an object in the controller, it's normal to be shown that way. Try setting it to one of the 3 choices you have like this:
angular.module('yourModule').controller('ctrl', function($scope)){
$scope.item = {}; //edited
$scope.item.type = "1"; // or 2, or 0
}
This is how angular handles two-way databinding. If the value of your item.type does not match any of the options, it is normal to add another blank line.
EDIT:
<select class="form-control" ng-model="item.type" >
<option value="0">Real</option>
<option value="1">Fake</option>
<option value="2">Both</option>
</select>
The problem of blank option is due to the ng-model is not matching with the ng-option values. Could you just print the value of item.type in view using {{item.type}}.
Make the following changes.
In controller set the item.type as
$scope.item = {};
$scope.item.type = "1";
make the following changes in html.
<select class="form-control" ng-model="item.type" >
<option value="0">Real</option>
<option value="1">Fake</option>
<option value="2">Both</option>
</select>
I've got two dropdowns. The allowable options in those dropdowns should be filtered based on what's in the other dropdown. Here's the first dropdown:
<select ng-model="filter.levelPregenerate">
<option value="">All</option>
<option value="assox">Associate's</option>
<option value="bachx">Bachelor's</option>
<option value="mastx">Master's</option>
<option value="doctx">Doctorate</option>
<option value="nondx">Non-Degree</option>
<option value="bridx">Bridge</option>
</select>
And the second dropdown is an ng-repeat, as follows:
<select ng-model="filter.degreeTypePregenerate">
<option value="">All</option>
<option ng-repeat="type in degreeType | orderBy:'toString()'">{{type}}</option>
</select>
And here's the array being repeated above:
$scope.degreeType = ['BA', 'BS', 'MA', 'MBA',
'MDIV', 'MED', 'MFA', 'MPH',
'MS',' DNP', 'EDD', 'PHD',
'EDSPL', 'GRDCERT'];
The options in the first and second dropdown should be filtered based on each other. Here's the mapping between the two (how the filter should work):
assox: '';
bachx: 'BA, BS';
mastx: 'MA, MBA, MDIV, MED, MFA, MPH, MS';
doctx: 'DNP, EDD, PHD';
nondx: 'EDSPL, GRDCERT';
bridx: ''
So, if 'BA' is selected in the second dropdown, 'bachx' should be the only option available in the first dropdown. Conversely, if 'doctx' is selected in the first dropdown, 'DNP', 'EDD', and 'PHD' should be the only select-able options in the second dropdown.
Here's a Codepen with the full code: http://codepen.io/trueScript/pen/LVZKEo
I don't think I can simply apply a basic '| filter:foo' to the second dropdown, because it wouldn't know how to filter it. What is the Angular way to do this?
You could set up a custom filter and return the values that should be displayed. Two ways of doing it:
Option 1 - If/else
angular.module('programApp', [
'programApp.controllers',
'programApp.filters'
]);
angular.module('programApp.filters', [])
.filter('dropdownFilter', function() {
return function(input, degreeTypePregenerate) {
if (degreeTypePregenerate === 'assox') {
return [];
} else if (degreeTypePregenerate === 'bachx') {
return ['BA', 'BS'];
}
// and so on..
}
});
Option 2 - An object (cleaner in my opinion)
angular.module('programApp.filters', [])
.filter('dropdownFilter', function() {
return function(input, degreeTypePregenerate) {
var degreeType = {
'assox': [],
'bachx': ['BA', 'BS']
};
return degreeType[degreeTypePregenerate];
}
});
Finally, apply the filter to your ng-repeat, passing in the variable you want to filter by:
<option ng-repeat="type in degreeType | orderBy:'toString()' | dropdownFilter:filter.levelPregenerate">{{type}}</option>
Working codepen: Codepen
I got a bunch of selects:
<select name="paraquien" class="selectpicker form-control paraquien" id="paraquien" onchange="mostrarPreguntas();">
<option value=""><?=__('¿Para quién es el plan?')?><span class="glyphicon glyphicon-triangle-bottom"></span></option>
<option value="1"><?=__('Para mi')?> <span class="glyphicon glyphicon-triangle-bottom"></span></option>
<option value="2"><?=__('Para regalar')?><span class="glyphicon glyphicon-triangle-bottom"></span></option>
</select>
and I would like to know if all of them have been selected, and in that case trigger an event. I've tried this far:
jQuery('.paraquien option:selected')
Getting this result array:
[
<option value="1">Para mi </option>,
<option value="1">Hombre</option>,
<option value="3">Estudiante</option>,
<option value>Su situación sentimental</option>,
<option value>¿Tiene hijos?</option>
]
You can see every option selected has a value attribute set, what I would like to know is how to get just the options which value has been already set, in the same selector mentioned before.
Any Idea?
You can use filter() to check for select elements where the value is still ''. Try this:
var $unchosenSelects = $('.paraquien').filter(function() {
return $(this).val() == '';
});
if ($unchosenSelects.length) {
// there was at least one select within nothing chosen...
}
Similarly you could use map() to get all the values in an array, then $.inArray to check for empty strings:
var chosenValues = $('.paraquien').map(function() {
return $(this).val();
});
if ($.inArray(chosenValues, '') != -1) {
// there was at least one select within nothing chosen...
}
so i have a working feature that when a user selects any option on my select input, will change the selects class.
This works fine, but what i want is that if the user selects the first option again, then the class gets changed back.
the first option is set as a placeholder, i cant give it a value as i only want the information to be posted if any other options are selected.
I also cant set the input as disabled as i want the user to be able to reselect it after, incase they dont want to post that data.
its a long check list and i am posting the data as an array.
here is a jsfiddle to what i currently have:
http://jsfiddle.net/SD7cd/1/
Code:
<select id="sel1" class="selectoption" name="desc[]">
<option selected="selected">Select an option...</option>
<option value="1">Option 1</option>
</select>
JS:
document.getElementById("sel1").onchange = function() {
if(this.value != null && this.value != undefined)
{
this.className = "selectoption-okay";
}
};
I'd use the .selectedIndex property over the value like this:
document.getElementById("sel1").onchange = function () {
this.className = (this.selectedIndex != 0) ? "selectoption-okay":"selectoption";
};
jsFiddle example
One problem when you used if(this.value != null && this.value != undefined) is that the first option will have a value even though you didn't explicitly assign it. An option element's value will default to its contents if no value is expressly given, no it won't ever be null or undefined.
Per MDN:
The textual content of this attribute represents the label explaining
the option. If it is not defined, its default value is the text
content of the element.
Can you try this, When you select the option Select an option..., if you have not assigned the value='' then Select an option... will be taken as a value.
So Added
<option selected="selected" value="">Select an option...</option>
^^^^^^^^
HTML:
<select id="sel1" class="selectoption" name="desc[]">
<option selected="selected" value="">Select an option...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Javascript:
document.getElementById("sel1").onchange = function() {
this.className = "selectoption";
if(this.value != '' )
{
this.className = "selectoption-okay";
}
};
DEMO: http://jsfiddle.net/SD7cd/4/