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
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 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
I'm trying to check for changes in the md-select, but I'm not able to achieve it with $dirty
<div class="resourceForm" ng-form="resForm{{$index}}">
<md-select name="resourceAllocForm" id="id{{resourceContent.activityId}}-{{x}}" ng-model="selRes[$parent.$index][x]" placeholder="Select Resource" class="md-no-underline" ng-keyup="resourceCheck($parent.$index)">
<md-option ng-value="resource.id" ng-repeat="resource in resourceList track by resource.id">{{resource.roleProLabel}}</md-option>
</md-select>
</div>
and I have tried something like this
$timeout(function(parentIndex){
$scope.resourceAllocForm['resForm' + parentIndex].$dirty;
console.log('Form Edited');
}
You need something like this,
<md-select ng-change="show(resource)" ng-model="selectedresource">
<md-option ng-repeat="resource in resourceList track by resource.id" value="{{resource.id"}}">{{resource.roleProLabel}}
</md-option>
<md-select>
and in controller
$scope.show = function(resource){
console.log(show);
}
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')
This is my scope.projectArr array
scope.projectArr = [
{
"proName":"fffff",
"proId":"12"
},
{
"proName":"project 0001",
"proId":"13"
},
{
"proName":"ABC website",
"proId":"7"
}
];
Again i have a another object that has a property called project and contain a string value
$scope.timesheet = {};
$scope.timesheet.project = "ABC website";
my question is i want all the array element as options and pre select an option based on $scope.timesheet.project value. I tried this using ng-model-options="{trackBy: $value.proName}" But unable to do so
here is the html
<md-select placeholder="Project" ng-model="timesheet.project"
flex ng-model-options="{trackBy: $value.proName}">
<md-optgroup label="Project">
<md-option ng-repeat="item in projectArr" ng-value="item">{{item.proName}} </md-option>
</md-select>
i tried using curly brackets inside ng-value but the same result.
i look up the inspect element to check whether values assign to options but it show as [object object]
`
Please note that i'm using angular material and as far for my knowledge ng-option is not available in the material.
don't get confuse by the vm.projectArr in the image. i'm using controllerAs in my app but for simplicity sake i post this question as scope variables.
Update
You can make use of ng-model-options like below:
You missed quotes around trackBy expression
<md-select placeholder="Project" ng-model="timesheet.project" flex ng-model-options="{trackBy: '$value.proName'}">
<md-optgroup label="Project">
<md-option ng-repeat="item in projectArr" ng-value="item">{{item.proName}} </md-option>
</md-select>
In your controller use below:
$scope.timesheet = {
'project': {
'proName': "ABC website"
}
};
Updated Plunker
I was able to get it working by using
$scope.timesheet = {
'project': arrFilter($scope.projectArr, 'proName', 'ABC website')[0]
};
arrFilter method: this method takes an array, property name, property value and returns the array from array of objects.
function arrFilter(arr, prop, val) {
return arr.filter(function(v) {
debugger;
return v[prop].indexOf(val) > -1
}) || [];
}
Working demo
Plunker
Explanation:
Since your options getting objects, you should provide the same object reference which arrFilter is doing.
The reason for doing so is, in javascript object comparison is done by reference not value.
Example:
{} never equals to {}
but a={}, b=a and a equals b
Try this,
ng-value ="item.proId"
<md-select placeholder="Project" ng-model="timesheet.project"
flex ng-model-options="{trackBy: $value.proName}">
<md-optgroup label="Project">
<md-option ng-repeat="item in projectArr" ng-value="item.proId">{{item.proName}} </md-option>
</md-select>
Initialize your model in the controller as
$scope.timesheet.project = $scope.projectArr[2]
Or in your view as
<div ng-init="timesheet.project = projectArr[2]">
<md-select placeholder="Project" ng-model="timesheet.project" flex>
<md-optgroup label="Project">
<md-option ng-repeat="item in projectArr">{{item.proName}}</md-option>
</md-select>
</div>
This will initialize it to 3rd object and show 'ABC website'
It should be like to this
$scope.timesheet = {};
$scope.timesheet.project = $scope.projectArr[0];
Edit:
<md-select placeholder="Project" ng-model="timesheet.project" >
<md-option ng-repeat="item in projectArr"
ng-value="item.proName"> {{item.proName}} </md-option>
</md-select>
and init like this
$scope.timesheet.project = $scope.theStringValue; //ABC website
or similar to this
<md-select placeholder="Project" ng-model="timesheet.project" >
<md-option ng-repeat="item in projectArr"
ng-value="item.proId"> {{item.proName}} </md-option>
</md-select>
and for default selected value
angular.forEach($scope.projectArr,function(proj){
if(proj.proName == $scope.theStringValue)
$scope.timesheet.project = proj.proId;
})