使用 AngularJS 将一个 Select 的 JSON Object 复制到另一个 Select ng-model

Question

我有 JSON Collection

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

我有两个 HTML Select 具有相同的 JSON Collection。我在第一个 Select “Person”中 Selected a Person Watson，然后我需要更新 Same in第二个HTMLSelect“复制人”。但是更新不了

我将 JSON Object 绑定为 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>

这里我用了$scope.$watchCollection来更新复制人

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

我的代码无法在第二个 Select 中更新。请协助我如何更新...

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

Answer 2

不要使用 ng-repeat 创建第二个 select，做类似的事情：

<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 来呈现 select 选项的原因。在许多情况下，可以在元素上使用 ngRepeat 而不是 ngOptions 来获得类似的结果。但是，ngOptions 提供了更多好处：

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

如果你不想使用更好的方法，ng-options，你可以添加 ng-selected 属性和选项指令的条件检查逻辑来制作 pre-select 工作！

使用 AngularJS 将一个 Select 的 JSON Object 复制到另一个 Select ng-model

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

angularjs

json

html-select

angular-ngmodel

angularjs-ng-model