I have total 4 dropdows. two dropdown(ddl)s use same $scope and other two use same $scope.
Now problem is when I change first ddl value, it automatically changes second ddl value(I don't want that, still i want to use same $scope). is it possible to use same $scope and still both ddls work individually???
Here is my code.
<html ng-app>
<div ng-controller="ctrl">
<div>
<select ng-model="m.roleId" ng-change="loadPersons(m.roleId)" ng-options="w.roleId as w.roleName for w in roles">
<option value=""></option>
</select>
<select ng-model="m.contactId" ng-options="w.contactId as w.personName for w in personList">
<option value=""></option>
</select>
<select ng-model="m.roleId" ng-change="loadPersons(m.roleId)" ng-options="w.roleId as w.roleName for w in roles">
<option value=""></option>
</select>
<select ng-model="m.contactId" ng-options="w.contactId as w.personName for w in personList">
<option value=""></option>
</select>
</div>
</div>
</html>
my .js
function ctrl($scope) {
$scope.roles=[{ roleId:1, roleName:"Admin"},{roleId:2,roleName:"guest"}];
$scope.persons = [{contactId: 1,roleId:1,personName: "Joy"},
{contactId: 2,roleId:1,personName: "Jack"},
{contactId: 3,roleId:1,personName: "Jonh"},
{contactId: 4,roleId:2,personName: "Gereth"}];
$scope.click=function(data)
{ console.log(data.roleId);
console.log(data.contactId);
}
$scope.loadPersons=function(id)
{
$scope.personList=[];
angular.forEach($scope.persons,function(person)
{
if(person.roleId==id)
{
$scope.personList.push(person);
}
})
} ;
}
please check this fiddle. http://jsfiddle.net/ZwwH7/4/
Use different model in 1st and 3rd selct box
<select ng-model="m.roleId1" ng-change="loadPersons(m.roleId1)" ng-options="w.roleId as w.roleName for w in roles">
<option value=""></option>
</select>
<select ng-model="m.contactId" ng-options="w.contactId as w.personName for w in personList">
<option value=""></option>
</select>
<select ng-model="m.roleId2" ng-change="loadPersons(m.roleId2)" ng-options="w.roleId as w.roleName for w in roles">
<option value=""></option>
</select>
<select ng-model="m.contactId" ng-options="w.contactId as w.personName for w in personList">
<option value=""></option>
</select>
Related
First two lines are from js file where value is fetching through id.
var activity = document.getElementById("bactivity").value;
var activity1 = activity.options[activity.selectedIndex].value;
<select style="font-size:15px" ng-model="activity" value="Enter activity" id="bactivity">
<option selected>select</option>
<option value="Fitness">Fitness</option>
<option value="Aerobics">Aerobics</option>
<option value="Dance">Dance</option>
<option value="Martial arts">Martial arts</option>
<option value="Boxing">Boxing</option>
<option value="Athletics">Athletics</option>
</select>
the above code is from html file where I am displaying data in form of dropdown and when I am selecting any value it generate error that option is invalid. Some tell what was my mistake there so I can make it correct.
Herre you can find the working code, you just had to take the elements not their value (first 2 lines of code):
var activity = document.getElementById("bactivity");
var activity1 = activity.options[activity.selectedIndex];
<select style="font-size:15px" ng-model="activity" value="Enter activity" id="bactivity">
<option selected>select</option>
<option value="Fitness">Fitness</option>
<option value="Aerobics">Aerobics</option>
<option value="Dance">Dance</option>
<option value="Martial arts">Martial arts</option>
<option value="Boxing">Boxing</option>
<option value="Athletics">Athletics</option>
</select>
I have a drop down which contains the following values
<select class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
Because of this in drop-down the value is always selected to "Critical"
In my scope i have defined the values of severity per drop-down. How do i select that ?
For example say the value is "High". How do i set the default value to high and not critical
You'll need to define at object within your scope and bind it to the ng-model of your select.
Script
$scope.form = {
"severity": "high"
};
HTML
<select class="form-control" ng-model="form.severity">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
There are a couple of ways to select an option with angular:
1- Bind it to a model and set the model:
<select class="form-control" ng-model="myValue">
And
$scope.myValue = 'medium';
2- You can set it in a directive by jQuery or JS:
$("#yourselectid").val('low');
I am using a dropdown like below
<select class="form-control"
data-ng-model="vm.priceBuilder.projectID"
data-ng-change="vm.changeProject(option)"
data-ng-options="option.pK_ProjectID as option.projectNumber for option in vm.projectList">
<option value="">Please select...</option>
</select>
and my controller binding is
changeProject(selectedProject) {
this.getSubTask(selectedProject.fK_ProjectID);
};
Here selectedProject is undefined. what is actual cause I can not understand.
clearly option is not defined you need to call the ng-change wither with the model or use the model in your function.
<select class="form-control"
data-ng-model="vm.priceBuilder.projectID"
data-ng-change="vm.changeProject(vm.priceBuilder.projectID)"
data-ng-options="option.pK_ProjectID as option.projectNumber for option in vm.projectList">
<option value="">Please select...</option>
</select>
<div class="field-wrap">
<select name=courses class="input-field1" name="state" title="state" ng-model="signup.state" >
<option value="">Select State</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Orissa">Orissa</option>
<option value="Pondicherry">Pondicherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Tripura">Tripura</option>
<option value="Uttaranchal">Uttaranchal</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="West Bengal">West Bengal</option>
</select>
</div>
this is the select menu i am using i want to fetch the selected value in my controller but don't know how to do that, I already fetched the value for textbox but have no idea about the select box.
$scope.signupForm = function() {
if ($scope.signup_form.$valid) {
var data = {
firstname : $scope.signup_form.firstname.$modelValue,
lastname : $scope.signup_form.lastname.$modelValue,
email : $scope.signup_form.email.$modelValue,
mobileNumber : $scope.signup_form.mobileNumber.$modelValue,
district : $scope.signup_form.district.$modelValue,
state : $scope.signup_form.state.$modelValue,
course : $scope.signup_form.course.$modelValue,
collegeName : $scope.signup_form.collegeName.$modelValue,
};
This is my controller, I think I have to use ng-option but not sure.
Thanks
In your case $scope.signup.state will have value of selected state.
The value of selected option is saved into model assigned to dropdown
I'd suggest adding an array of options in your Controller instead of hardcoding it in the HTML and then use the ng-options directive to display the options from that array, you'd end up with something like:
<select name=courses class="input-field1" name="state" title="state" ng-model="signup.state" ng-options="option in options">
(where options is an array of options declared inside your controller
$scope.options = ['option1', 'option2'];
Then you can simply bind that input to an ng-model and use it regularly from the controller
$scope.signup.state
will give you access to whatever option is selected
You can use ng-change here. When ever an option is selected from the drop down then this method will be fired and we can persist the selected option data.
html
<div>
<select ng-model="selState" ng-change="selectedState(selState)"
data-ng-options="state as state.name for state in states">
<option value="">Select Account</option>
</select>
{{selectedState}}
</div>
script.js
myApp.controller('Ctrl', function($scope) {
$scope.states=[
{name:"AP"},
{name:"Karnataka"},
{name:"Tamilnadu"}
];
$scope.selectedState = function(item) {
alert(item.name);
};
Working Plunker
i am using a angular to populate an selectInput, but i want to use a "Custom" values in the option value
My current output
<select ng-change="getModels(selected.id)" ng-model="selected" ng-options="category.name for category in categories">
<option value="0">red</option>
<option value="1">green</option>
<option value="2">yellow</option>
</select>
My Json
$scope.categories = [
{id:1000, name:red}
{id:2000, name:green}
{id:3000, name:yellow}
}
and i want this output:
<select>
<option value="1000">red</option>
<option value="2000">green</option>
<option value="3000">yellow</option>
</select>
You can use track by expression like this:
<select
ng-options="category.id as category.name for category in categories track by category.id"
ng-model="selected">
</select>
Please see this jFiddle.