I'm having a JSON Collection
$scope.person = [
{
"Id": 1
"Name": "John"
},
{
"Id": 2
"Name": "Jack"
},
{
"Id": 3
"Name": "Watson"
},
];
Kindly refer my one of the post Copy JSON Object of One Select to another Select ng-model using AngularJS
Here I'm using Angular Material md-select instead of HTML Select
In md-select, ng-options not working. So, kindly assist me how to update Select value of first md-select to second md-select
The Complete HTML Source Code is
<!DOCTYPE html>
<html>
<head>
<title>HTML Select using AngularJS</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="md-block">
<md-input-container>
<label>Person</label>
<md-select ng-model="selected.person">
<md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option>
</md-select>
</md-input-container>
</div>
<hr />
<div class="md-block">
<md-input-container>
<label>Copy Person</label>
<md-select ng-model="selected.copy_person">
<md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option>
</md-select>
</md-input-container>
</div>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial'])
app.controller('myCtrl', function ($scope) {
$scope.person = [
{
"Id": 1,
"Name": "John"
},
{
"Id": 2,
"Name": "Jack"
},
{
"Id": 3,
"Name": "Watson"
}
];
$scope.selected = {
person: null,
copy_person:null
};
$scope.$watchCollection('selected.person', function (newData, oldDaata) {
var obj = JSON.parse(newData);
if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id != "0")) {
var name = obj.Name;
alert(name);
$scope.selected.copy_person = obj;
}
});
});
</script>
</body>
</html>I'm having two Angular Materials md-Select with same JSON Collection. I Selected a Person Watson in the First md-select "Person", then I need to update the Same in the Second md-select "Copy Person". But I Can't able to update.
I bind the JSON Object as a Value in the md-select options instead of Id or Name
Kindly assist me how to update in md-select ?
Instead of assigning an object just assign the original value.
Currently are you using this approach:
$scope.selected.copy_person = JSON.Parse(newData);
Just Change the logic to
$scope.selected.copy_person = newData;
The Complete Version is
<!DOCTYPE html>
<html>
<head>
<title>HTML Select using AngularJS</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="md-block">
<md-input-container>
<label>Person</label>
<md-select ng-model="selected.person">
<md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option>
</md-select>
</md-input-container>
</div>
<hr />
<div class="md-block">
<md-input-container>
<label>Copy Person</label>
<md-select ng-model="selected.copy_person">
<md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option>
</md-select>
</md-input-container>
</div>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial'])
app.controller('myCtrl', function ($scope) {
$scope.person = [
{
"Id": 1,
"Name": "John"
},
{
"Id": 2,
"Name": "Jack"
},
{
"Id": 3,
"Name": "Watson"
}
];
$scope.selected = {
person: null,
copy_person:null
};
$scope.$watchCollection('selected.person', function (newData, oldDaata) {
var obj = JSON.parse(newData);
if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id != "0")) {
var name = obj.Name;
alert(name);
$scope.selected.copy_person = newData;
}
});
});
</script>
</body>
</html>By default, the Value part assigns the JSON Object as a String, as per your on of the post Bind JSON Object as a Value in AngularJS HTML Select - Dropdown . So, just compare the value as a String instead of JSON Object.