I'm using a md-select:
<label>Type</label>
<md-select ng-model="selected_data_type">
<md-option ng-repeat="data_type in data_types" value="{{data_type.name}}">{{data_type.name}}</md-option>
</md-select>
That is preloaded with data using:
for (let type of getData())
$scope.data_types.push({ name: type });
And also setting a default value after the data has been loaded:
$scope.selected_data_type = data.type
So now I got a md-select with some items and a selected item as default, but when changing selected item to any other than the default and pressing an event button, that triggers console.log($scope.selected_data_type); gives the default selected value. Why is that?
The information you provide is a bit confusing. In your question you have (1)
value="{{data_type.name}}"
which is correct. While in your CodePen example you have
ng-value="{{data_type.name}}"
which is incorrect. It should be (2)
ng-value="data_type.name"
Your CodePen works with both (1) and (2), as you can see in the console.
CodePen
Instead of value use ng-value. From the official documentation
<md-input-container>
<md-select ng-model="someModel" placeholder="Select a state">
<md-option ng-value="opt" ng-repeat="opt in neighborhoods2">{{ opt }}</md-option>
</md-select>
</md-input-container>
Related
I've got a AngularJS Material Select:
<md-input-container style="margin-right: 10px;">
<label>Roll</label>
<md-select id="acc-type" required="" ng-model="rolle">
<md-option ng-selected="true" value="Tenant">Tenant</md-option>
<md-option value="Lessor">Lessor</md-option>
</md-select>
</md-input-container>
and I want to get the actual selected option. I tried it with
var e = document.getElementById("acc-type");
var selectedItem = e.value;
but all I receive is undefined. Is there any option to get the value of a md-select in AngularJS?
Since you have already defined ng-model="rolle" in your md-select, you can access it via $scope.rolle
Try:
var selectedItem = $scope.rolle
Its in angular Js and model is already assigned so try
Try
console.log($scope.rolle);
I am having md-select like :
<md-select ng-model="someModel" title={{someModel}}>
<md-option ng-value="opt.id" ng-repeat="opt in neighborhoods2">{{ opt.name }}</md-option>
It shows opt.id value in title.But I have to show opt.name in title.How to add a title attribute for the selected value's name?
for that you have to select object in ng-value like
<md-select ng-model="someModel" title={{someModel.name}}>
<md-option ng-value="opt" ng-repeat="opt in neighborhoods2">{{ opt.name }}</md-option>
</md-select>
but make sure in your controller you will get an object so you have to get id as
if(angular.isString(someModel)){
var myValue= JSON.parse(someModel).id;
}
Instead of setting the value to opt.name, you could use the opt object itself as the value. That way, your md-select model will have the name and id of whatever item is selected.
Here's a codepen: https://codepen.io/standard/pen/JKKeEy
I have two md-select as following :
<div layout=column>
<md-input-container flex><label for=organizations>Organization</label>
<md-select ng-model="dg.selectedOrganization" name=organizations aria-label="Organizations" required>
<md-option ng-value=organization ng-repeat="organization in dg.organizations"> {{organization.title}} </md-option>
</md-select>
<div ng-messages=dg.myForm.organizations.$error>
<div ng-messages-include=messages/messages.html></div>
</div>
</md-input-container>
<md-input-container flex><label for=rules>Role</label>
<md-select ng-model="dg.selectedRule" name=rules aria-label="Rules" required>
<md-option ng-value=rule ng-repeat="rule in dg.selectedOrganization.rules"> {{rule.title}} </md-option>
</md-select>
<div ng-messages=dg.myForm.rules.$error>
<div ng-messages-include=messages/messages.html></div>
</div>
</md-input-container>
</div>
So when I select a value from the first md-select (organization), dg.selectedOrganization will get the selected value and the second md-select will be populated depending on the selected value. And then when I select something in the second md-select (rules) dg.selectedRule will get the selected value.
The problem I had is when I change dg.selectedOrganization, the dg.selectedRule will always have the old value until I select a new one, normally the dg.selectedRule should be null before I select any value after changing dg.selectedOrganization.
How can I solve this ?
Add an onChange handler for the dg.selectedOrganization select
When the onChange event fires, update dg.selectedOrganization.rules and also set dg.selectedRule to a value that exists in dg.selectedOrganization.rules. If you want to set it to an empty value then you will need to ensure that there is an empty value in the select, or you could just set it to the first available option.
I'm trying to implement md-virtual-repeat for md-select which has more than 2000 items to select. This not working with the md-option.
<md-input-container>
<md-select ng-model="break.start_time" md-on-open="vm.mdSelectOnOpen()">
<md-virtual-repeat-container id="vertical-container">
<md-option md-virtual-repeat="option in vm.time" value="option.value" >{{option.text}}</md-option>
</md-virtual-repeat-container>
</md-select>
</md-input-container>
What is the problem with this? I have updated a plunker with my problem. see
Updated Answer
Since you are using md-virtual select the check boxes you can refer the below codepen, there was no need to add a check box itself since md-select has an attribute called multiple which will add the check boxes
Code
<md-input-container>
<label>Select an option</label>
<md-select ng-model="selectedOption" md-on-open="mdSelectOnOpen()" multiple>
<md-virtual-repeat-container id="vertical-container">
<md-option md-virtual-repeat="option in options" ng-value="option" ng-selected="selectedOption.indexOf(option) > -1">{{option}}</md-option>
</md-virtual-repeat-container>
</md-select>
</md-input-container>
Codepen: here
Old Answer
You need to give ng-selected option and ng-value.
<md-input-container>
<md-select ng-model="break.start_time" md-on-open="vm.mdSelectOnOpen()">
<md-virtual-repeat-container id="vertical-container">
<md-option md-virtual-repeat="option in vm.time" ng-value="option.value" ng-selected="break.start_time==option.value">{{option.text}}</md-option>
</md-virtual-repeat-container>
</md-select>
</md-input-container>
Refer: codepen
I know this is an old thread, but maybe this can help to someone.
If the following did not work
$scope.$broadcast("$md-resize")
use this instead:
angular.element(window).triggerHandler('resize')
I've md-select with multiple options enabled.
By default ng-model of md-select does have one OBJECT value as array element.
on click/on selection of md-option - I want to update ng-model of md-select (Parent md-select)
<md-input-container class="md-block">
<md-select ng-model="selected_item" ng-model-options="{trackBy: \'$value.id\'}" multiple>
<md-option ng-value="item" ng-click="onSelectItem(item)" ng-repeat="item in items">{{item.name}}</md-option>
</md-select>
What you're asking for happens automatically for you. When you set md-select as multiple, the ng-model will be an array of the selected items. See the "Option Groups" demo at https://material.angularjs.org/latest/demo/select for an example. You can select multiple toppings for your pizza and no extra code is needed to push those values into the model array.