IR Punch IR Punch - 5 months ago 24
JSON Question

Copy JSON Object of One Select to another Select ng-model using AngularJS

I'm having a JSON Collection

$scope.person = [
{
"Id": 1
"Name": "John"
},
{
"Id": 2
"Name": "Jack"
},
{
"Id": 3
"Name": "Watson"
},
];


I'm having two HTML Select with same JSON Collection. I Selected a Person Watson in the First Select "Person", then I need to update the Same in the Second HTML Select "Copy Person". But I Can't able to update.

I bind the JSON Object as a Value in the HTML Select instead of
Id
or
Name




<!DOCTYPE html>
<html>
<head>
<title>HTML Select using AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div class="md-block">
<label>Person</label>
<select ng-model="selected.person">
<option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</option>
</select>
</div>
<hr />
<div class="md-block">
<label>Copy Person</label>
<select ng-model="selected.copy_person">
<option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</option>
</select>
</div>

</div>

<script>
var app = angular.module('myApp', []);

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>





Here I used
$scope.$watchCollection
to update the Copy Person

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


enter image description here

My Code fails to update in the Second Select. Kindly assist me how to update...

Answer

This is the code you must use, ng-options is made for this:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Select using AngularJS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <div class="md-block">
            <label>Person</label>
            <select ng-model="selected.person" ng-options="p as p.Name for p in person">
            </select>
        </div>
        <hr />
        <div class="md-block">
            <label>Copy Person</label>
            <select ng-model="selected.copy_person" ng-options="p as p.Name for p in person">
            </select>
        </div>

    </div>

    <script>
    var app = angular.module('myApp', []);

    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 = 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>