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);
Related
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
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 have a hostSettings object in which there is a host object. "cohostLists" is an array of host object. I'm getting the "cohostLists" as an array of objects and the selected cohost are also saved but not being set in page.
model
#ManyToMany(cascade = CascadeType.PERSIST)
#JoinTable(name = "host_settings_cohost_list",
joinColumns = #JoinColumn(name="host_settings_id", referencedColumnName="ID"),
inverseJoinColumns = #JoinColumn(name="cohost_lists_id", referencedColumnName="ID"))
private Set<Host> cohostLists = new HashSet<>();
html
<md-input-container flex="55">
<md-select ng-model="vm.hostSettings.cohostLists" multiple="true" ng-click="vm.getCoHostList()">
<md-optgroup >
<md-option ng-value="host" ng-repeat="host in vm.coHostList">{{host.user.firstName}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
cohostLists :
cohostLists:Array[1]
0:Object
$$mdSelectId:1
deleted:false
department:null
designation:"director"
dob:null
id:2
mobileNumber:"98765"
officePhoneNumber:"34355"
organisation:null
profilePic:"dir.jpg"
user:Object
activated:true
deleted:null
email:"host#gh.fgbd"
firstName:"host1"
id:5
langKey:"en"
lastName:"hh"
login:"host"
organisation:null
resetDate:null
resetKey:null
I think the problem is in md-select code.But I couldnt find the bug
Finally I got the answer
Change the html code like this:
<md-select ng-model="vm.hostSettings.cohostLists"
ng-model-options="{trackBy: '$value.id'}" multiple="true">
<md-option ng-value="host" ng-repeat="host in vm.coHostList">{{
host.user.firstName}}
</md-option>
</md-select>
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>