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
Related
So, I have a md-select based on a JSON I receive. These options have a "type" property that I can filter by as seen below:
$scope.data = [
{name:"1-1",Id:1,type:1},
{name:"2-2",Id:2,type:2},
{name:"3-2",Id:3,type:2},
{name:"4-2",Id:4,type:2},
{name:"5-3",Id:5,type:3},
{name:"6-3",Id:6,type:3}
];
<md-select multiple class="form-control" ng-model="selectedIds">
<md-option ng-value="item.Id" ng-repeat=""item as (item.Name) for item in data">
{{item.Name}}">
</md-option>
</select>
But what I need is to filter the options showed in the select using the options already selected in the same dropdown. So if I select the option "3-2", the dropdown would show only "2-2, 3-2 and 4-2". How can I do that?
Could find a solution for this using this other question:
On change, I get the selected type using a filter by the selected Id, and then use the type as filter to the options. Also, if no option selected, the "selectedType" should be set to nothing, otherwise it filtered by the first option's type.
<md-select multiple class="form-control" ng-model="selectedIds"
ng-change="selectedType=(selectedIds.length=0)?'':(data|filter:{Id:selectedIds})[0].type">
<md-option ng-value="item.Id" ng-repeat="item in data | filter : selectedType">
{{item.Name}}">
</md-option>
</select>
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.
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
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>