将 JSON 对象绑定为 AngularJS HTML 选择中的值 - 下拉答案

【问题标题】：Bind JSON Object as a Value in AngularJS HTML Select - Dropdown将 JSON 对象绑定为 AngularJS HTML 选择中的值 - 下拉
【发布时间】：2016-07-05 17:07:10
【问题描述】：

我有一个 JSON 集合

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

在 HTML 中，我将上面的 Collection 绑定在 AngularJS HTML Select 中。完整的 HTML 源代码是

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

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

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

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

我在下拉列表中选择了 Jack，我的预期选择值为

{
    "Id": 2
    "Name": "Jack"
}

但我得到的值是字符串 "{"Id":2,"Name":"Jack"}"

请帮助我，如何将值作为 JSON 对象...

【问题讨论】：

1) Json 对象，而不是 json 文档。 2）一种解决方案就是使用 JSON.parse(yourJsonString)

标签： javascript angularjs json html-select

【解决方案1】：

您只需执行以下操作即可获取 JSON 对象：

JSON.parse(yourJsonString);

所以你的代码应该是这样的：

 var newDataJSON = JSON.parse(newData)
 var name = newDataJSON.Name

【讨论】：

@IRPunch 如果这对您有帮助，您可以接受答案吗？
@IRPunch 非常感谢