I have the following small sample:
<md-select ng-model="selectedYears" multiple>
<md-option>10 Years</md-option>
<md-option value="2016">
<md-option value="2015">
<!--- more options -->
</md-select>
What I want is when the user selects the option that I labeled with "10 Years" above, the equivalent of the following should happen (instead of selecting the option)
$scope.selectedYears = [2016, 2015/*, ... */];
You could put change event on your select so that whenever there is 10 years have been selected that time you could last 10 years manually. Also you have to change value to ng-value so that value should be consider as of number type instead of string.
Markup
<md-select ng-model="selectedYears" multiple ng-change="yearChanged(selectedYears)">
<md-option ng-value="10">10 Years</md-option>
<md-option ng-value="2016">2016</md-option>
<md-option ng-value="2015">2015</md-option>
<md-option ng-value="2014">2014</md-option>
<md-option ng-value="2013">2013</md-option>
<md-option ng-value="2012">2012</md-option>
<md-option ng-value="2011">2011</md-option>
<md-option ng-value="2010">2010</md-option>
<md-option ng-value="2009">2009</md-option>
<md-option ng-value="2008">2008</md-option>
</md-select>
</md-select>
Forked Pen
Related
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')
How to get the display text and value in angular material md-select. I am able to get only the Model value(selected_value)
<md-input-container class="md-block">
<label>Some Label</label>
<md-select
ng-model="selected_value">
<md-option ng-value="item" ng-repeat="item in ctrl.items" >
</md-select>
</md-input-container>
My list
[ID: name1, Name:value1]
[ID: name2, Name:value2]
[ID: name3, Name:value3]
[ID: name4, Name:value4]
I need to get value1 if name1 is selected .
Like all option in a select field you can bind the display value, here item.Name, and link to it another value, here item.ID. So you can write your code like this :
<md-input-container class="md-block">
<label>Some Label</label>
<md-select ng-model="selected_value">
<md-option ng-value="item" ng-repeat="item in ctrl.items">{{ item.Name }}</md-option>
</md-select>
</md-input-container>
When an option is selected, the model, here selected_value, is equal to the value from ng-value.
Above, the select field displays all the name of each item and when an user selects an option you can get your full item (ID and Name) via the variable selected_value.
For more information, you can read the official documentation : https://material.angularjs.org/latest/api/directive/mdSelect
You can use ng-model-options="{trackBy: '$value.ID'}" to select {ID: name1, Name:value1}
<md-select name="serviceType"
id="serviceType"
ng-model="ctrl.selected_value"
ng-model-options="{trackBy: '$value.ID'}">
<md-option ng-value="t" ng-repeat="t in ctrl.items">{{ t.Name }}</md-option>
</md-select>
I am using Angular Material to make my new web app, I want to get the selected value from an <md-select> and the problem is that I am new to angularjs and how it works. If anyone could help me, it would be really appreciated.
HTML :
<md-input-container>
<label>Rating</label>
<md-select ng-model="userRating">
<md-option><em>None</em>
</md-option>
<md-option ng-repeat="rate in ratings" ng-value="rate.abbrev">
{{rate.abbrev}}
</md-option>
</md-select>
</md-input-container>
You can just get the value by using the $scope variable
In controller
console.log($scope.userRating);
Inorder to get the selected value on change , you can pass the selected to a function and display,
<md-select ng-change="Print()" class="inline-flex md-select-down" placeholder="Select" ng-model="model">
<md-option ng-repeat="item in ratings" value="{{item.value}}">
{{item.abbrev}}
</md-option>
</md-select>
Controller:
$scope.Print = function(){
alert($scope.model);
}
DEMO
In Angular 1.5, I have the following setup:
<form name="linksForm">
<md-input-container>
<label>Region</label>
<md-select ng-model="$ctrl.user.region">
<md-option ng-repeat="region in $ctrl.allRegions" value="{{region.id}}" ng-bind="region.name"></md-option>
</md-select>
</md-input-container>
<md-input-container ng-if="$ctrl.user.region">
<label>Territory</label>
<md-select ng-model="$ctrl.user.territory" name="territory" required>
<md-option ng-repeat="territory in $ctrl.getTerritories($ctrl.user.region)" value="{{territory.id}}" ng-bind="territory.name"></md-option>
</md-select>
</md-input-container>
<md-input-container ng-if="linksForm.territory.$valid">
<label>House</label>
<md-select ng-model="$ctrl.user.house">
<md-option ng-repeat="house in $ctrl.allHouses" value="{{house.id}}" ng-bind="house.name"></md-option>
</md-select>
</md-input-container>
</form>
Here is the logic:
At first, only the regions list is visible.
When a region is selected, the territory list appears with a list of territories from the selected region.
When a territory is selected, the house list appears.
So far, so good. The thing works. The only problem is when I change the region, here is what happens:
The territory list changes, and since ngModel cannot match any of the new options, the territory selector is now unset. This is working as expected, but...
The house list does not disappear, despite the territory selector being required, therefore the territory field should be invalid.
I have a hostSettings object in which there is a host object. "cohostLists" is an array of host object. I'm getting the "cohostLists" as an array of objects and the selected cohost are also saved but not being set in page.
model
#ManyToMany(cascade = CascadeType.PERSIST)
#JoinTable(name = "host_settings_cohost_list",
joinColumns = #JoinColumn(name="host_settings_id", referencedColumnName="ID"),
inverseJoinColumns = #JoinColumn(name="cohost_lists_id", referencedColumnName="ID"))
private Set<Host> cohostLists = new HashSet<>();
html
<md-input-container flex="55">
<md-select ng-model="vm.hostSettings.cohostLists" multiple="true" ng-click="vm.getCoHostList()">
<md-optgroup >
<md-option ng-value="host" ng-repeat="host in vm.coHostList">{{host.user.firstName}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
cohostLists :
cohostLists:Array[1]
0:Object
$$mdSelectId:1
deleted:false
department:null
designation:"director"
dob:null
id:2
mobileNumber:"98765"
officePhoneNumber:"34355"
organisation:null
profilePic:"dir.jpg"
user:Object
activated:true
deleted:null
email:"host#gh.fgbd"
firstName:"host1"
id:5
langKey:"en"
lastName:"hh"
login:"host"
organisation:null
resetDate:null
resetKey:null
I think the problem is in md-select code.But I couldnt find the bug
Finally I got the answer
Change the html code like this:
<md-select ng-model="vm.hostSettings.cohostLists"
ng-model-options="{trackBy: '$value.id'}" multiple="true">
<md-option ng-value="host" ng-repeat="host in vm.coHostList">{{
host.user.firstName}}
</md-option>
</md-select>