使用 AngularJS 将一个 md-Select 的 ng-model 中的 JSON 对象复制到另一个 md-Select答案

【问题标题】：Copy JSON Object in ng-model of One md-Select to another md-Select using AngularJS使用 AngularJS 将一个 md-Select 的 ng-model 中的 JSON 对象复制到另一个 md-Select
【发布时间】：2016-11-07 17:56:30
【问题描述】：

我有一个 JSON 集合

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

请参考我的一篇帖子Copy JSON Object of One Select to another Select ng-model using AngularJS

这里我使用 Angular Material md-select 而不是 HTML Select

在 md-select 中，ng-options 不起作用。所以，请帮助我如何将第一个 md-select 的 Select 值更新为第二个 md-select

完整的 HTML 源代码是

<!DOCTYPE html>
<html>
<head>
    <title>HTML Select using AngularJS</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
</head>
<body>

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

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

</div>

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

    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>

我有两个具有相同 JSON 集合的 Angular Materials md-Select。我在第一个 md-select "Person" 中选择了一个 Person Watson，然后我需要在第二个 md-select "Copy Person" 中更新 Same。但我无法更新。

我将 JSON 对象绑定为 md-select 选项中的值，而不是 Id 或名称

请帮助我如何在 md-select 中更新？

【问题讨论】：

标签： angularjs json angular-material ng-options angularjs-ng-options

【解决方案1】：

不幸的是 md-select 不支持 ng-options...

而且 ng-repeat 不能与 select 组件的 ng-model 绑定。

【讨论】：

【解决方案2】：

只分配原始值而不是分配对象。

目前您是否使用这种方法：

$scope.selected.copy_person = JSON.Parse(newData);

只需将逻辑更改为

$scope.selected.copy_person = newData;

完整版是

<!DOCTYPE html>
<html>
<head>
    <title>HTML Select using AngularJS</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
</head>
<body>

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

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

</div>

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

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

    });
</script>
</body>
</html>

默认情况下，值部分将 JSON 对象分配为字符串，根据您的帖子 Bind JSON Object as a Value in AngularJS HTML Select - Dropdown 。因此，只需将值作为字符串而不是 JSON 对象进行比较。

【讨论】：