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.
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')
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
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>
So I have the following:
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Documents</label>
<md-select multiple ng-model="ctrl.data.documents" placeholder="Documents" ng-controller="DocumentsCtrl"> // I want to show the submitted values.
<md-option ng-value="doc" ng-repeat="doc in allItems">{{ doc.name }}</md-option> // A list of other values
<div ng-hide="allItems.length">No items found</div>
</md-select>
</md-input-container>
</div>
ctrl.data.documents is an array of already selected values.
What I am trying to achieve is to present this array (ctrl.data.documents) in the field options and a list with the other values which is the ng-repeat in this case. The ng-repeat works just fine. I am able to select other values. But can't figure out how to show the already selected values.
Did some digging I thought ng-options might do it, but can't seem to get it working (not supported ??) and ng-selected did not do the trick as well.
Any help or ideas?
Update #1:
Added a picture of the ctr.data.documents array.
You have to use ng-model-options="{trackBy: '$value.id'}" and ng-repeat="doc in allItems track by doc.id". The id part should be your identifying marker of your document.
<md-select multiple ng-model="ctrl.data.documents"
ng-model-options="{trackBy: '$value.id'}"
placeholder="Documents" ng-controller="DocumentsCtrl">
<md-option ng-value="doc" ng-repeat="doc in allItems track by doc.id">{{ doc.name }}</md-option>
<div ng-hide="allItems.length">No items found</div>
</md-select>
Most of this is documented here: https://material.angularjs.org/latest/api/directive/mdSelect
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