I am adding employee with designation field in dropdown (say 'Employee'). When I try to edit the profile of employee in another page the designation should display the pre-selected dropdown value with remaining values below.(the selected designation is not displaying first. it is shown as normal dropdown)
I have tried selected="selected"
<select class="form-control edited" id="designation_edit" name="designation_edit" ng-model="designation_edit">
<option value="HR" selected="selected">HR Executive</option>
<option value="Manager">Manager</option>
<option value="Employee">Employee</option>
<option value="Admin">Admin</option>
</select>
I have two modal boxes in my page. One for "add employee" and another for edit profile. When I add an employee with designation value from drop-down as employee, this selected value should be displayed first in edit page 'designation' drop-down with remaining values in the dropdown.
But currently, it is showing as normal dropdown in edit profile page. I need to fetch the selected value from add page and display here.
Help me to come out with this in angularjs.
Is it correct to add the below line in ajax call
$('#designation_edit').attr("selected":"selected");
I have tried:
$('#designation_edit').append('Designation Manager Employee Admin');
Simple way
If you have a Users as response or a Array/JSON you defined, First You need to set the selected value in controller, then you put the same model name in html. This example i wrote to explain in easiest way.
Simple example
Inside Controller:
$scope.Users = ["Suresh","Mahesh","Ramesh"];
$scope.selectedUser = $scope.Users[0];
Your HTML
<select data-ng-options="usr for usr in Users" data-ng-model="selectedUser">
</select>
complex example
Inside Controller:
$scope.JSON = {
"ResponseObject":
[{
"Name": "Suresh",
"userID": 1
},
{
"Name": "Mahesh",
"userID": 2
}]
};
$scope.selectedUser = $scope.JSON.ResponseObject[0];
Your HTML
<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>
To show selected value you can do as follows
Controller
assign a default value to the ng-model
$scope.empDesignationMapping = {
employee1 : "manager",
employee2 : "HR",
employee3: "Admin"
}
$scope.designation_edit = $scope.empDesignationMapping[employee1] // should be dynamic employee
HTML
<select ng-model="designation_edit" ng-selected="designation_edit" >
after that whenever you select something something it will show as selected.
Related
Im populating the values and display names for a select based on a JSON call. In the same call, I'm pulling from a nested array to get a default account value (if it exists).
so I have a scope that is holding that default account value, and the select is populating, but for the life of me, I can't figure out how to get the select attribute to apply to the object in the array that has a value that corresponds to the default value.
Essentially, I just want to apply "selected" to the option if the default account ID exists in the array.
Additionally, I cannot change the ng-model of the select because its tied into the form collection function.
Also, Im open to using ng-repeat vs ng-options, just couldn't figure it out with repeat so I moved to the options paradigm.
Any assistance would be grateful!
HTML:
<select class="form-control" id="authQAccount" name="authQAccount" ng-model="authFields.accountID" ng-init ng-options="item as item.name for item in accounts track by item.ID" ng-selected="$scope.defaultAcct" required>
</select>
In my controller:
$http.get('/api/assessment/authorize').success(function(data, status, headers, config) {
$scope.content = data.data;
//Pop the defaults and user options
$scope.languages = [];
angular.forEach(data.data.languages, function(value, key) {
$scope.languages.push(value);
});
$scope.accounts = [];
angular.forEach(data.data.accounts, function(value, key) {
$scope.accounts.push(value);
});
$scope.defaultAcct = data.data.defaultAccount;
The data Im getting:
"data": {
"defaultAccount": "6481004",
"defaultLanguage": "en_us",
"defaultAddonBody": "Test Email for Default",
"accounts": [{
"ID": "6481004",
"name": " ABC Company, Inc. "
}, {
"ID": "6481619",
"name": "EDF Company - Personal "
}
ng-selected only works on option elements and not on the select element itself. I don't think you can achieve what you want here with ng-options, if ng-model isn't set to a matching item then there's no way for the select to have that item selected.
Unless you only want it to appear selected, then you can add <option value="" ng-if="defaultAccount">{{defaultAccountName}}</option>. But then you'd have 2 items for the same value, you could either remove the default account from the list of options or keep the two items but with one of them prefixed as (Default). The second option lets users still select the default option without losing their choice later on, in case the default changes. This also means your form has the default selected without having to change the outer model.
I'm new to angular, and struggling with updating bound values from a select box that is inside a modal which is populated based on a particular row of data that is "edited" in a table. Currently, I can click edit, the select box populates with the correct values and selected option based on the user row I "edited". My problem is I can update either the ID or the Title of my model but not both. Here is my html select:
<select ng-model="user.team">
<option ng-selected="{{x.id}} === user.team.id" ng-repeat="x in teams" ng-selected="{{x.id}} == {{user.team.id}}" value="{{x.id}}">{{x.title}}</option>
</select>
Note that if I make ng-model="user.team.id" it updates the id correctly in my list, and "user.team.title" updates the title correctly. My scope/model is defined as such and I would like to update both id and title when the option is changed:
$scope.user = {
team :{
id: '',
title: ''
}
};
Can't you just do:
<select ng-model="user.team" ng-options="x.title for x in teams track by x.id"></select>
ng-model will set the initial selection to the option that matches user.team
Please look at the following jsbin. I have a select input that has two options (Ohio, NewYork). Within the ng-options for the Select, I am selecting the entire object and NOT just the name or key value. I need both.
When I select Ohio (for example), the model correctly updates showing the selected object:
"birthState": {
"Key": "1",
"Value": "Ohio"
}
If I add this code to the model within my controller (setting the field to 'Ohio' by default), the select does not reflect this default setting.
What am I doing wrong that is preventing me from giving this dropdown a default value?
You are not able to select because, all objects will have unique id. objects in options array and object assigned in model (in controller) will be different in this way.
To achieve what you wanted, try adding track by option.Key in ng-options, and assign Key for 'birthState' field of model inside controller.
<script type="text/ng-template" id="select.html">
<select required type="number" ng-model="model[options.key]" ng-options="option.Value for option in to.options track by option.Key">
<option value="">Select One</option>
</select>
</script>
inside controller
vm.model = {
"birthState": {Key: '3'}
};
I am developing a mobile application where there is a view where there are two select tags first select tag consist of options of teams & in the second select tag there are forms associated with team Ids that user select in first select tag. I want to filter the data of second select tag as per the team Id of first select tag on ng-change event.
For the first select tag i have populated as follows:
<select ng-change="showForms(name.id)" ng-model="name" ng-options="f.name for f in devices track by f.id"></select>
my second select tag is this:
<select ><option ng-repeat="formEach in forms" id="{{formEach.Formid}}">{{formEach.Formname}}</option></select>
Here my concern is i dont want to show any forms that are present inside the forms array initially when user is about to select team. When user selects team, the forms with the selected teams id associated should be shown in the second select tag. How the filtering will be occur or is it on same page or through controller. I am familiar with PHP but task is in angular & am new to angularJS.
Thanks in advance for quick response.
Sample data is this:
devices = [
{id : X001, name :'Team 1', icon: 'ion-document-text', status : 'Owner', color : 'brown'},
{id : X002, name :'Team 2', icon: 'ion-document-text', status : 'Owner', color : 'yellow'},
{id : X003, name :'Team 3', icon: 'ion-document-text', status : 'Owner', color : 'black'}
];
forms data is this:
forms= [
{id : AS001, teamid: X001, formname :'Feam 1', icon: 'ion-document-text', status : 'Active'},
{id : AS002, teamid: X001, formname :'Feam 2', icon: 'ion-document-text', status : 'Draft'},
{id : AS003, teamid: X003, formname :'Feam 3', icon: 'ion-document-text', status : 'Draft'}
];
controller code is this: (controller logic is not written as am confused of populating the data as am filling the array at the time of navigation to this view)
$scope.showForms = function(teamId){
}
You can do this by simply following below trick. I've used the same in one of my project.
<select class="custom-select" ng-model="teamName" data-ng-options="f.id as f.name for f in devices" ng-change="updateTeamObject($index, teamName);">
<option value="">Select Team</option>
</select>
and in your second select, just use.
<select class="custom-select" ng-model="deviceForms" data-ng-options="o.id as o.formname for o in forms | filter:{teamid:teamName}">
<option value="">Your team data</option>
</select>
Fiddle
Try this:
<div ng-app>
<div ng-controller="TodoCtrl">
<select ng-change="showForms(name.id)" ng-model="name" ng-options="f.name for f in devices"></select>
<select ng-model="selected">
<option ng-repeat="formEach in forms| filter:{teamid:name.id }" id="{{formEach.id}}">{{formEach.formname}}</option>
</select>
</div>
</div>
Demo: http://jsfiddle.net/U3pVM/15890/
Explanation:
Important part is
ng-repeat="formEach in forms| filter:{teamid:name.id }"
Note how the filter is used. Specify the property (i.e. teamid in your case) where you want the filter to be applied. Since model name stores the selection, you can filter the next select dropdown by using name.id . For testing, just select the last option in the first select dropdown in the demo, the next dropdown will have the filtered results.
You can achieve it by pushing the items you want in the second select tag's array at the time of ng-change event of the first tag
In the ng-change function, push items into the array like this in the controller,
$scope.specifications = [];
angular.forEach($scope.allSpecifications, function(spec) {
if(spec.id == id) {
$scope.specifications.push(spec)
}
});
In Html use that array
<select ng-change="showSpec(car.id)" ng-init="car = carsList[0]" ng-model="car" ng-options="car.name for car in carsList"></select>
<select>
<option ng-repeat="primitive in specifications" id="{{primitive.id}}">{{primitive.name}}</option>
</select>
I have done one plunker with a sample JSON,
Working Plunker
Hope this helps!
I have an javascript object as follows in my controller:
$scope.options = [
{
"actualValue": "age",
"displayValue": "Age"
},
{
"actualValue": "maiden",
"displayValue": "Maiden Name"
}
];
Now, I am displaying a select element in which the options of the element will be the values in the "displayValue" property written above:
<select ng-options="entry.displayValue for entry in options" ng-model="biodata">
<options>-- Select a BioData Option --</option>
</select>
Now, my problem is that the ng-model for the select element above when the user select a value from the dropdown is the "displayValue" property. I wish that the ng-model be the "actualValue" property.
How can I achieve this?
<select ng-options="entry.actualValue as entry.displayValue for entry in options"></select>
Fiddle: http://jsfiddle.net/rzV65/
Already answered here: How do I set the value property in AngularJS' ng-options?