I have an application for managing user roles. I have a bunch of users in an array $scope.users. The structure of a user object looks like that:
{
name: "Larry",
role: {
id: 2,
name: "Work"
class: "role-work"
},
mustHaveRole: true
}
I also have a bunch of roles in an array $scope.roles. The structure of each role element is the same as each users role field.
I need to create a <select> element, which contains every role in $scope.roles. Each <option> element needs to have the class specified in its class field. The role, which has a matching id with the user's role.id, must be initialy selected. The <select> element must inherit it's class from surrently selected <option> element. For users, who have mustHaveRole set to false, there must also be a empty element which sets it's role field to null.
How can this be achieved? I feel like ng-options is not flexible enough, but when I create all the <option> elements with ng-repeat, Angular sometimes creates an extra empty <option> elementy, which should not be there-
Assign the ng-model with user role id
<div ng-controller="MyCntrl">
<select ng-model="user.role.id" ng-options="v for v in roles">
</select>
</div>
function Ctrl($scope) {
$scope.roles= { "type": "select",
"values": [ "Role 1", "Role 2", "Role 3", "Role 4"]
};
}
Check this plnkr
Related
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.
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.
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 have the following data (provided from an Angular service, stored in the controller) I need to use to populate a drop-down, and also select the default value. When the page renders, the first dropdown option is "?" and is selected by default. The second dropdown option is "Name 1".
I've read around and tried different things, so I'm wondering if this is caused the track by being based on an id field with a different name (id vs. otherId)? Any ideas?
For the dropdown:
{"someDataSet":
[
{"id": "1", "name": "Name 1"},
{"id": "2", "name": "Name 2"}
]
}
For selecting the default value:
{"otherDataSet":
{"otherId": "1", "otherName": "Name 1"}
}
My front-end code:
<select ng-options="someData.name for someData in controller.someDataSet
track by someData.id" ng-model="controller.otherDataSet.otherId"/>
Thanks!
Check this solution: http://codepen.io/tzach/pen/LVKeGJ
Adding an option element will set the default value until your real data is loaded:
<option value="{{ controller.otherDataSet.otherId }}">{{ controller.otherDataSet.otherName }}</option>
I need to pre-select a specfic element in a Select tag.
My model is this:
{
user: 'mjones',
idprofile: 2,
profiles: [
{idprofile: 1, profile: 'admin'},
{idprofile: 2, profile: 'read-write'},
{idprofile: 3, profile: 'read-only'},
]
}
This represents a "user", and I attached a list of profiles to it, before opening a form with user-data, containing a select, for choosing the appropriate profile.
As you can see, the user object doesn't contain a "profile" object, but just it's idprofile. That's the difference between my object and those published in ngSelect documentation.
My view contains the select element as this:
<select class="form-control"
ng-model="user"
ng-options="profile.idprofile for profile in user.profiles">
</select>
This populates the list as expected, but it does not selects the idprofile: 2.
How can I match the idprofile from the user object with one element in the profiles array?, I prefer to work only on the view.
Your ng-model must be set to user.idprofile and not to the user.
<select class="form-control"
ng-init="user = user || profile[0]"
ng-model="user.idprofile"
ng-options="item.idprofile as item.profile for item in user.profiles">
</select>
the ng-options pattern is "select as label for value in array" (https://docs.angularjs.org/api/ng/directive/select)
The code would be easier to read with a few renames:
{
user: 'mjones',
idprofile: 2,
profiles: [
{id: 1, name: 'admin'},
{id: 2, name: 'read-write'},
{id: 3, name: 'read-only'},
]
}
<select class="form-control"
ng-init="user = user || profile[0]"
ng-model="user.idprofile"
ng-options="profile.id as profile.name for profile in user.profiles">
</select>