This is my HTML code:
<md-select ng-model="course" ng-change="getTeachers()">
<md-option ng-repeat="x in courses" ng-value="x.title">
{{x.title}}
</md-option>
</md-select>
and the function getTeachers is never called on item changed.
I don't understand why. I tried very hard.
you can use watch instead in your controller
$scope.$watch('course', function(newValue, oldValue) {
// do whatever you want
});
Related
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);
}
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;
})
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 form with some md-select dropdowns which im trying to bind with a scope object in my angular controller.
The html looks like that :
<div id="horizontal_form_category" class="row">
<div class="col-md-2 col-lg-2" data-ng-repeat="r in categories[general]" dir="rtl">
<md-input-container>
<label> {{ r.name }} </label>
<md-select ng-model="formObject[r.name]" class="md-no-underline">
<md-option ng-repeat="option in r.values" ng-value="option "> {{ option }} </md-option>
</md-select>
</md-input-container>
</div>
</div>
The controller has a definition of the object $scope.formObject = {}; (Although it should work without it)
But, unfortunately, the $scope.formObject object in my controller stays empty.
Any ideas what could cause such weird behavior ? I have some normal bootstrap components whom ng-model is written the same and are working just fine.
Thanks
Does this help in any way? - CodePen
The true as the last parameter for $watch checks for changes in the object formObject.
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-input-container>
<label> Options </label>
<md-select ng-model="formObject['Options']" class="md-no-underline">
<md-option ng-repeat="option in options" ng-value="option "> {{ option }} </md-option>
</md-select>
</md-input-container>
</div>
JS
angular.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.options = ["Earth", "Saturn", "Jupiter"];
$scope.$watch("formObject", function () {
console.log($scope.formObject);
}, true)
});
Apparently there wasnt any bug.
My form's md-select were empty and therefore the formObject was empty.
The minute I started puting values, the formObject got filled, one field at a time, containing only the fields that were set.
I added a default value and everything is now showing correctly, just to be sure this was the "bug".
In retrospect, this bevahiour actually saves me some lines of code so I adopted it :)
Gotta thank #camden_kid answer for the $watch tip, helped me figure it out in matter of seconds.