I have angular form and I am using md-select and md-option. But when I click on dropdown, freezes the screen and if I see by inspecting element md-option will be showing.
<md-select ng-model="Severities" placeholder="Select a Severity">
<md-select-label>{{ Severities.name }}</md-select-label>
<md-option ng-value="opt.id" ng-repeat="opt in severities.availableOptions">
{{ opt.name }}
</md-option>
</md-select>
$scope.severities= {
availableOptions: [
{
id: '1',
name: 'name1'
},
{
id: '2',
name: 'name2'
},
{
id: '3',
name: 'name3'
}
], };
$scope.severities= {
availableOptions: [
{id: '1', name: 'name1' },
{ id: '2', name: 'name2' },
{ id: '3', name: 'name3' }
]};
In your model $scope.severities.name is nothing and in md-select-label you are using this which is wrong.
Try this -
<md-select ng-model="Severities" placeholder="Select a Severity">
<md-option ng-value="opt.id" ng-repeat="opt in severities.availableOptions">
{{ opt.name }}
</md-option>
</md-select>
Try this i prefer using ng-option instead of ng-repeat
<md-select ng-model="Severities" placeholder="Select a Severity" ng-option="opt as opt for opt in severities.availableOptions">
<ng-option ng-selected="true">Select Option</ng-option>
</md-select>
I had the same issue while generating values from an Array and to use it in ng-options. According to what I have read, ng-options could be used sometimes via ng-repeat. The alternate which You can use is as follows:
<md-select ng-model="Severities" id="Severities"><ng-options ng-repeat="opt in severities.availableOptions" ng-value="{{opt.name}}">{{opt.name}}></ng-options></md-select>
The controller code would be as
$scope.severities= {
availableOptions: [
{id: '1', name: 'name1' },
{ id: '2', name: 'name2' },
{ id: '3', name: 'name3' }
]};
but I have used JavaScript to fetch the values selected in ng-options.
var severity = document.getElementById("Severities").value;
later process the severity value present in variable severity.
Related
I tried to follow this tutorial, But I can't make it work for multiple md-select. In fact I have a multiple select list of user and i want to have 2 users selected by default.
Is there any solution for achieving that?
You need to track all selected users instead of just one. And remove/add them on the array on demand if needed.
.controller('MyCtrl', function($scope) {
$scope.users = [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' },
{ id: 3, name: 'Steve' }
];
$scope.selectedUsers = [];
$scope.selectUser = function (id) {
var user = $scope.users.filter(function(user) {
return user.id == id;
})[0];
var idx = $scope.selectedUsers.indexOf(user);
if (idx < 0) {
$scope.selectedUsers.push(user);
} else {
$scope.selectedUsers.splice(idx, 1);
}
}
}
And in the view add multiple and switch to selectedUsers.
<md-select ng-model="selectedUsers" multiple ng-model-options="{trackBy: '$value.id'}">
<md-option ng-value="user" ng-repeat="user in users">{{ user.name }}</md-option>
</md-select>
Codepen: https://codepen.io/kuhnroyal/pen/VWeWaw
This code defines the array of selected objects
$scope.selectedUsers = [];
You can set it by default with some of the users
$scope.selectedUsers =[
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' }
];
This is because ng-model is set with selectedUsers.
If you need more info about NG-MODEL behaviour, take a look here : https://docs.angularjs.org/api/ng/directive/ngModel
You'll also learn more about data-binding in AngularJS.
Furthermore, you will have to update your HTML to allow the md-select to have multiple selected value.
<md-select ng-model="selectedUsers" multiple></md-select>
You'll learn more about it here https://material.angularjs.org/latest/api/directive/mdSelect
Controller:
$scope.users = [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' },
{ id: 3, name: 'Steve' }
];
$scope.selectedUser =[
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' }
];
View:
<md-select ng-model="selectedUser" ng-model-options="{trackBy: '$value.id'}" multiple>
<md-option ng-value="user" ng-repeat="user in users">{{ user.name }}
</md-option>
</md-select>
When I use ng repeat to build selector and I am using options with same value angulars returns 'Error: Duplicate md-option values are not allowed in a select. Duplicate value "1" found.'
angular.module('app',['ngMaterial'])
.controller('repeatCtrl', function($scope) {
$scope.items = [
{ value: 1, name: 'Item 1' },
{ value: 1, name: 'Item 2' },
{ value: 1, name: 'Item 3' },
{ value: 4, name: 'Item 4' },
{ value: 5, name: 'Item 5' },
];
});
<md-input-container>
<label>choose item</label>
<md-select ng-model="item">
<md-option ng-repeat="item in items" value="{{item.value}}">{{item.name}}</md-option>
</md-select>
</md-input-container>
Sorry, havent used material, but the below will work in regular angular and html.
<select ng-options="x as x.name for x in items" ng-model="item">
<option>Select something...</option></select>
and then use item.value where you need it
I have created a select box in two different ways with AngularJS. One with static options in the HTML and ng-model and one with ng-options.
Both populate the select box, however, when a value comes back from the REST API the select box stays blank.
The docs suggest tracking by id.
<select id="delimiter" name="delimiter" ng-model="config.delimiter"
ng-options="option.name for option in data.availableOptions track by option.id">
</select>
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'} //This allegedly sets the default value of the select in the ui
};
//Truncated version of what happens after API call
$scope.config = $scope.result.selectedConfig;
The data that comes from the server contains the numbers i.e. the ids.
The config option is supposed to have the delimiter set on it and then the select box is supposed to select the correct item, but it doesn't.
However, a simple example like this DOES work at selecting the correct item so it must be something with the binding after the REST call.
<body ng-app ng-controller="AppCtrl">
<div>
<label>Delimiter</label>
<select ng-model="mydelimiter">
<option value="44">Comma</option>
<option value="9">Tab</option>
<option value="32">Space</option>
<option value="124">Pipe</option>
<option value="59">Semi-Colon</option>
<option value="58">Colon</option>
</select>
</div>
</body>
function AppCtrl($scope) {
$scope.mydelimiter = '59';
}
I'm not sure if this is exactly what you were looking for but if you'er just trying to set a specific default value, set the model to the selectedOption
$scope.config = {};
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'}
};
$scope.config.delimiter = $scope.data.selectedOption;
Or you could set it directly from the array:
$scope.config.delimiter = $scope.data.availableOptions[0];
Here's a fiddle with a working example:
http://jsfiddle.net/pkobjf3u/1/
How to convert normal select list code into angular-ui-select directive code.
My code html:
<select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f.value as f.text for f in bigValueOptions" ng-change="render()"></select>
My controller code:
$scope.bigValueOptions= [{
text: 'min',
value: 'min'
}, {
text: 'max',
value: 'max'
}, {
text: 'avg',
value: 'avg'
}, {
text: 'current',
value: 'current'
}, {
text: 'total',
value: 'total'
}];
What I have tried:
<ui-select id="viewSelector"
class="viewSelector input-small tight-form-input"
ng-model="panel.valueName"
theme="selectize"
ng-change="render()">
<ui-select-match placeholder="Select">{{$select.selected.text}}</ui-select-match>
<ui-select-choices repeat="f in bigValueOptions">
<div ng-bind-html="f.text"></div>
</ui-select-choices>
</ui-select>
panel.valueName is not having correct value. How to fix this or how to convert normal select into ui-select directuve code.
Please guide.
It works for me: Plunker
Did you defined $scope.panel = {};?
JS:
app.controller('DemoCtrl', function($scope, $http) {
$scope.bigValueOptions= [{
text: 'min',
value: 'min'
}, {
text: 'max',
value: 'max'
}, {
text: 'avg',
value: 'avg'
}, {
text: 'current',
value: 'current'
}, {
text: 'total',
value: 'total'
}];
$scope.panel = {};
});
HTML:
<body ng-controller="DemoCtrl">
Selected object: {{panel.valueName}}
<ui-select id="viewSelector"
class="viewSelector input-small tight-form-input"
ng-model="panel.valueName"
theme="selectize"
ng-change="render()">
<ui-select-match placeholder="Select">{{$select.selected.text}}</ui-select-match>
<ui-select-choices repeat="f in bigValueOptions">
<div ng-bind-html="f.text"></div>
</ui-select-choices>
</ui-select>
</body>
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>