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>
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
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;
})
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