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.
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 a simple md-select component. I want to set the value of number.number on the vm.telephonyInfo.phone.number property in the controller.
<md-input-container>
<md-select ng-model="vm.telephonyInfo.phone.number" placeholder="Selecteer een nummer" required>
<md-option ng-repeat="number in vm.phonenumbers"
ng-value="{{number.number}}" ng-click="vm.login()">{{number.number}}</md-option>
</md-select>
</md-input-container>
When I select a option I log the login() function but the property this.telephonyInfo.phone.number always is null.
Is my data-binding wrong? I thought I had to put the ng-value in the md-option and the ng-model in the md-select.
Use the ng-change directive instead of ng-click:
<md-input-container>
<md-select ng-model="vm.telephonyInfo.phone.number"
ng-change="vm.login()"
placeholder="Selecteer een nummer" required>
<md-option ng-repeat="number in vm.phonenumbers"
̶n̶g̶-̶v̶a̶l̶u̶e̶=̶"̶{̶{̶n̶u̶m̶b̶e̶r̶.̶n̶u̶m̶b̶e̶r̶}̶}̶"̶
ng-value="number.number"
̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶v̶m̶.̶l̶o̶g̶i̶n̶(̶)̶"̶ >{{number.number}}</md-option>
</md-select>
</md-input-container>
Also avoid using double curly {{ }} interpolation in ng-value directives. See AngularJS Developer Guide - Why mixing interpolation and expressions is bad practice.
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
select in dialog - angular material - mdpanel
using sample md-select
but click outside the select when the options are open is not working.
how can I fix it ?
thx a lot
html:
<md-select ng-model="ctrl.selectedUser" ng-model-options="{trackBy: '$value.id'}">
<md-option ng-value="user" ng-repeat="user in ctrl.users">{{ user.name }}</md-option>
</md-select>
fixed:
I have removed the "zIndex" property from md-panel or md-dialog config object
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>