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

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

回答1:

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>

回答2:

Dont use ng-repeat for create the second select, do something like that:

<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" ng-options="obj.Name for obj in person track by obj.Name">
        </select>
    </div>

This is exactly why you should not use ngRepeat with to render select options. In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides more benefits:

more flexibility in how the 's model is assigned via the select as part of the comprehension expression
reduced memory consumption by not creating a new scope for each repeated instance
increased render speed by creating the options in a documentFragment instead of individually. You should use ngOptions instead.

If you don't want to use the better way, ng-options, you can add ng-selected attribute with a condition check logic for the option directive to to make the pre-select work!

来源：https://stackoverflow.com/questions/38209946/copy-json-object-of-one-select-to-another-select-ng-model-using-angularjs

标签

angularjs

json

html-select

angular-ngmodel

angularjs-ng-model