I have tried to use ng-options in this json array
$scope.new_user = [
{
id_usuario: 0,
usuarioNome: '',
usuarioAD: '',
perfil: [{ master: "Não", id: 0 }, { master: "Sim", id: 1 }],
acesso: [{ restringir: "Não", id: 0 }, { restringir: "Sim", id: 1 }]
}];
<select ng-options="perfil as perfil.master for perfil in new_user" ng-model="perfil"></select>
What I'm doing wrong?
Thanks all
You should check:
<select ng-model="perfil" ng-options="perfil as perfil.master for perfil in new_user[0].perfil"></select>
You ng-model is what is selected.
You should have something like this :
<select ng-options="perfil as perfil.usuarioNome for perfil in new_user" ng-model="selectedPerfil"></select>
To avoid a blank anwser in your selected you should set selectedProfil in your controller :
$scope.selectedPerfil = $scope.new_user[0];
Related
I need style to option (similar AngularJs Material), which inside select with ng-options. How I can do it? What is the best and simple way?
index.html:
<select ng-model="$ctrl.orderBy"
ng-options="option.name for option in $ctrl.options.sort">
</select>
contoller.js :
this.options = {
sort: [
{
name: 'alphabetically',
value: 'name',
reverse: false
},
{
name: 'index',
value: 'code',
reverse: false
}
]
};
this.orderBy = this.options.sort[0];
I am using a bootstrap multiselect plugin by david stutz.
Here is my html
<select class="multiselect" name="multiselect[]" id="multiselect-employee" ng-model="taskData.AssignedId" ng-options="emp.Name for emp in employeelistoptions" multiple="multiple" multiselect-dropdown></select>
here is my script
$(document).ready(function () {
$('#add-new-task').on('click', function () {
$('#multiselect-employee').multiselect({
nonSelectedText: 'Select an employee!',
includeSelectAllOption: true,
enableFiltering: true
});
clearValues(scope);
});
});
employeelist options is a dynamic array which stores data
$scope.employeelistoptions =[ {
ProfileId:0 ,
Name: ""
}];
Now the multiselect doesn't works if employeelistoptions is used. but it works when some array like employeeList(Which is not dynamic) is used.
$scope.employeeList = [{
ProfileId: 1,
Name: "Antony"
}, {
ProfileId: 2,
Name: "Amal"
}, {
ProfileId: 3,
Name: "Sachin"
}];
How can i bind dynamic array data to multiselect?
js:
$scope.tasks = [{ Name: "Deliverable", Id: "Deliverable" },
{ Name: "Email", Id: "Email" }]
$scope.currentTask = {Subject: "Deliverable"}
html:
<select ng-model="currentTask.Subject" ng-options="task.Id as task.Name for task in tasks"></select>
result:
No option is selected when page load. But the dropdown works well. Am I missing anything?
$scope.activities =
[
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
<select data-ng-model="engineer.currentActivity" data-ng-options="a.name for a in activities">
</select>
Using the above I am able to create a select box with 3 values, a blank one and then dropdown menu and horizontal bar.
I would like to set Horizontal Bar as my default and cannot see how to do this.
Help would be great
In the controller, just add a line to setup the initial selection:
$scope.activities =
[
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.engineer = {}; // if needed
$scope.engineer.currentActivity = $scope.activities[1];
In your angular controller:
$scope.activities = [
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.activity = $scope.activities[1]; //Bind 2nd activity to the model.
In the HTML:
<select ng-model="activity"
ng-options="activity as activity.name for activity in activities">
<option value=""></option>
</select>
See the Fiddle
Use ng-init directive
ng-init="engineer.currentActivity = options[1]"
I am trying to show a select box inside a ng-repeat and am stuck with the following:
<tr ng-repeat="element in elements" post-repeat-directive>
<td>{{element.name}}</td>
<td>
<select ng-model="element.type"
ng-options="item.id as item.name for item in tipo_items"></select>
</select>
</td>
</tr>
In my controller I have:
$scope.tipo_items = [
{ id: 1, name: 'uno' },
{ id: 2, name: 'dos' },
{ id: 3, name: 'tres' },
{ id: 4, name: 'cuatro' },
{ id: 5, name: 'cinco' },
];
This shows the select items, but no item is pre-selected!
I checked the element.type values and they are correct...
What am I doing wrong?
According to the comprehension expression you defined in the select, you need to use the id value to preselect the item and set it for the model object.
$scope.element = {};
$scope.element.type = $scope.tipo_items[0].id;
DEMO
OK I found the problem...
I was loading the id from the database as json, and the id was a string, not an integer...
this solved the problem:
$scope.tipo_items = [
{ id: '1', name: 'uno' },
...
instead of
$scope.tipo_items = [
{ id: 1, name: 'uno' },
...
This is default behavior by angular select directive. If you'll set ng-model to a default in the ctrl you'll get it preselected.
something like (in the ctrl):
$scope.element.name = $scope.tipo_items[0]