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
Related
I've got a AngularJS Material Select:
<md-input-container style="margin-right: 10px;">
<label>Roll</label>
<md-select id="acc-type" required="" ng-model="rolle">
<md-option ng-selected="true" value="Tenant">Tenant</md-option>
<md-option value="Lessor">Lessor</md-option>
</md-select>
</md-input-container>
and I want to get the actual selected option. I tried it with
var e = document.getElementById("acc-type");
var selectedItem = e.value;
but all I receive is undefined. Is there any option to get the value of a md-select in AngularJS?
Since you have already defined ng-model="rolle" in your md-select, you can access it via $scope.rolle
Try:
var selectedItem = $scope.rolle
Its in angular Js and model is already assigned so try
Try
console.log($scope.rolle);
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'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.
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>