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];
Related
I was populating v1 with a data structure like:
[{"label":"email","resource_type":"Email","options":[{"label":"Desc","value":1}]},{"label":"survey","options":[{"label":"HXH","value":3}]
And then populating another select with nested options. But now v2 auto populates the select with opt groups because of the nested option key of my json. How do I disable that?
There doesn't seem to be anything in react-select to disable the grouping but you could map your options before passing them into react-select so that it only includes the relevant data.
const originalOptions = [
{ label: 'email', resource_type: 'Email', options: [{ label: 'Desc', value: 1 }] },
{ label: 'survey', options: [{ label: 'HXH', value: 3 }] },
];
<Select
options={originalOptions.map(option => {
return { label: option.label, value: option.value };
})}
/>
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];
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?
I have a simple angular-kendo ComboBox on a page without an initially selected value. It should show the placeholder text in that case, but instead it's showing ? undefined:undefined ?
HTML
<select kendo-combo-box ng-model="Project" k-options='projectOptions'></select>
JS
app.controller('MyCtrl', function($scope) {
$scope.projectData = [
{name: 'Bob', value: 1},
{name: 'Tom', value: 2}
];
$scope.projectOptions = {
placeholder: "'Select...'",
dataTextField: 'name',
dataValueField: 'value',
dataSource: {
data: $scope.projectData
}
}
});
Here's a plunker that shows the problem. Can anyone spot the cause?
This used to work in an older version of angular-kendo, but it's not working in the current version.
This is somewhat related to this issue: https://github.com/angular/angular.js/issues/1019
The solution is simple: use an <input> instead of a <select> element:
<input kendo-combo-box ng-model="Project" k-options='projectOptions'/>
app.controller('MyCtrl', function($scope) {
$scope.projectData = [
{name: 'Bob', value: 1},
{name: 'Tom', value: 2}
];
$scope.projectOptions = {
placeholder: "'Select...'",
dataTextField: 'name',
dataValueField: 'value',
dataSource: {
data: $scope.projectData
}
}
});
(demo)
If you are using <Select> instead of <input> you can use simple placeholder="'Project'"
For example:
<select kendo-combo-box="projectComboBox"
k-data-source="projectDataSourceBox"
k-data-text-field="'projectName'"
k-data-value-field="'projectId'"
k-ng-model="Dialog.ProjectId"
k-value-primitive="true"
k-suggest="true"
required="required"
k-auto-bind="false"
k-filter="'contains'"
k-change="projectChangeBox"
style="width: 100%"
placeholder="'Project'">
</select>
$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]"