将一个选择的JSON对象复制到另一个使用AngularJS选择ng模型

I'm having a JSON Collection

我有一个JSON集合

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

我有两个带有相同JSON Collection的HTML Select。我在第一个选择“人物”中选择了一个人沃森，然后我需要在第二个HTML中更新相同的选择“复制人”。但我无法更新。

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

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

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

这里我用$ 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;
    }
});

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

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

2 个解决方案

#1

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

这是你必须使用的代码，为此做了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>

#2

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

不要使用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>

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:

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

more flexibility in how the 's model is assigned via the select as part of the comprehension expression
通过select作为理解表达式的一部分，可以更灵活地分配模型
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.
通过在documentFragment中创建选项而不是单独创建选项来提高渲染速度。您应该使用ngOptions。

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!

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

#1