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.
Related
<md-input-container >
<label>Days</label>
<input type="checkbox" ng-model="all">
<md-select ng-model="data.closingDay" multiple ng-disabled="all">
<md-optgroup label="days">
<md-option ng-value="day" ng-repeat="day in days">{{day}}</md-option>
</md-optgroup>
</md-select>
</md-input-container >
enter image description here
when a user first selected the days after that select the checkbox the model of days still keep the value of days thats the problem
You could achieve this by adding something like this to your checkbox:
<input type="checkbox" ng-click="data.closingDay = null">
Re-posting for future viewers.
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
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
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'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>