使用 AngularJS 将一个选择的 JSON 对象复制到另一个选择 ng-model答案

【问题标题】：Copy JSON Object of One Select to another Select ng-model using AngularJS使用 AngularJS 将一个选择的 JSON 对象复制到另一个选择 ng-model
【发布时间】：2016-07-05 18:10:54
【问题描述】：

我有一个 JSON 集合

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

我有两个具有相同 JSON 集合的 HTML 选择。我在第一个选择“Person”中选择了一个人 Watson，然后我需要在第二个 HTML 选择“Copy Person”中更新相同的人.但我无法更新。

我在 HTML Select 中将 JSON 对象绑定为值，而不是 Id 或 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>

这里我使用 $scope.$watchCollection 来更新 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;
    }
});

我的代码无法在第二个选择中更新。请帮助我如何更新...

【问题讨论】：

您只希望两个选择中的值相同。

标签： angularjs json html-select angular-ngmodel angularjs-ng-model

【解决方案1】：

这是你必须使用的代码，ng-options 就是为此而生的：

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

【讨论】：

这个$watchCollection真的有必要吗？
不，你可以只做一个 $watch，或者更好的是你可以只为第一个选择做 ng-change=update()。
是的，ng-change 确实更好。我正在使用它来回答，但是由于您的回答已经被接受，所以没有理由这样做。

【解决方案2】：

不要使用 ng-repeat 创建第二个选择，这样做：

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

这正是您不应该使用 ngRepeat 来呈现选择选项的原因。在许多情况下，可以在元素上使用 ngRepeat 而不是 ngOptions 来实现类似的结果。然而，ngOptions 提供了更多的好处：

通过选择作为理解表达式的一部分来分配 ' 模型的方式更加灵活
通过不为每个重复实例创建新范围来减少内存消耗
通过在 documentFragment 中而不是单独创建选项来提高渲染速度。您应该改用 ngOptions。

如果您不想使用更好的方法，ng-options，您可以为 option 指令添加带有条件检查逻辑的 ng-selected 属性，以使预选工作！

【讨论】：

select 都不应该使用ng-repeat。
但 ng-options 在 md-select (Angular Material) 中不受支持。能否请您提供 md-select 的解决方案。