使用 AngularJS 将一个 Select 的 JSON 对象复制到另一个 Select ng-model [英] Copy JSON Object of One Select to another Select ng-model using AngularJS

查看：21
本文介绍了使用 AngularJS 将一个 Select 的 JSON 对象复制到另一个 Select ng-model的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 JSON 集合

$scope.person = [{身份证":1姓名":约翰"},{身份证":2姓名":杰克"},{身份证":3名称":沃森"},];

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

我在 HTML 选择中将 JSON 对象绑定为值，而不是 Id 或 Name

<头><title>HTML 选择使用 AngularJS</title><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><身体><div ng-app="myApp" ng-controller="myCtrl"><div class="md-block"><label>人物</label><select ng-model="selected.person"><option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</option></选择>

<小时/><div class="md-block"><label>复制人物</label><select ng-model="selected.copy_person"><option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</option></选择>

<脚本>var app = angular.module('myApp', []);app.controller('myCtrl', function ($scope) {$scope.person = [{身份证":1，姓名":约翰"},{身份证":2，姓名":杰克"},{身份证":3，名称":沃森"}];$scope.selected = {人:空，复制人:空};$scope.$watchCollection('selected.person', function (newData, oldData) {var obj = JSON.parse(newData);if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id!= "0")) {var name = obj.Name;警报(名称)；$scope.selected.copy_person = obj;}});});</html>

这里我使用了 $scope.$watchCollection 来更新 Copy Person

$scope.$watchCollection('selected.person', function (newData, oldData) {var obj = JSON.parse(newData);if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id!= "0")) {var name = obj.Name;警报(名称)；$scope.selected.copy_person = obj;}});

我的代码未能在第二次选择中更新.请帮助我如何更新...

解决方案

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

<头><title>HTML 选择使用 AngularJS</title><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><身体><div ng-app="myApp" ng-controller="myCtrl"><div class="md-block"><label>人物</label><select ng-model="selected.person" ng-options="p as p.Name for p in person"></选择>

<小时/><div class="md-block"><label>复制人物</label><select ng-model="selected.copy_person" ng-options="p as p.Name for p in person"></选择>

<脚本>var app = angular.module('myApp', []);app.controller('myCtrl', function ($scope) {$scope.person = [{身份证":1，姓名":约翰"},{身份证":2，姓名":杰克"},{身份证":3，名称":沃森"}];$scope.selected = {人:空，复制人:空};$scope.$watchCollection('selected.person', function (newData, oldData) {var obj = newData;if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id!= "0")) {var name = obj.Name;警报(名称)；$scope.selected.copy_person = obj;}});});</html>

I'm having a JSON Collection

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

I bind the JSON Object as a Value in the HTML Select instead of Id or 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('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...

解决方案

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

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

这篇关于使用 AngularJS 将一个 Select 的 JSON 对象复制到另一个 Select ng-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆