angular.copy

最新推荐文章于 2025-09-10 16:16:57 发布

weixin_30567471

最新推荐文章于 2025-09-10 16:16:57 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qiudongjie/p/6669539.html

本文通过一个具体的示例展示了如何使用AngularJS中的深拷贝功能。具体操作包括初始化两个JSON对象，其中一个用于存储用户输入的数据（如姓名、年龄和性别），另一个则通过AngularJS的深拷贝功能保持与第一个对象相同的数据但不共享引用。

<!DOCTYPE html>
<html lang="en" ng-app="copyTest">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
</head>
<body ng-controller="copyCon">
    姓名:
    <input type="text" ng-model="firstJson.name" /><br />
    年龄:
    <input type="number" ng-model="firstJson.age" /><br />
    性别:
    <input type="radio" value="male" name="sex" ng-model="firstJson.sex">男
    <input type="radio" value="female" name="sex" ng-model="firstJson.sex">女<br />
    <input type="button" value="清空" ng-click="init()">
    <input type="button" value="copy" ng-click="copy(firstJson)">
    <div>
        <span>firstJson = {</span><br />
        <span>"name":</span><span>{{firstJson.name}}</span><br />
        <span>"age":</span><span>{{firstJson.age}}</span><br />
        <span>"sex":</span><span>{{firstJson.sex}}</span><br />
        <span>}</span><br />
        <span>secondJson = {</span><br />
        <span>"name":</span><span>{{secondJson.name}}</span><br />
        <span>"age":</span><span>{{secondJson.age}}</span><br />
        <span>"sex":</span><span>{{secondJson.sex}}</span><br />
        <span>}</span>
    </div>
    <script>
        angular.module('copyTest',[]).
            controller('copyCon',function ($scope) {
                $scope.firstJson = {};
                $scope.init = function () {
                    //写方法一
                    $scope.firstJson = {};
                    $scope.secondJson = angular.copy($scope.firstJson);
                };
                $scope.$watch('firstJson',function () {
                    console.log($scope.firstJson);
                },true);
                $scope.copy = function (second) {
                    //写方法二
                    angular.copy(second,$scope.secondJson);
                };
                $scope.init();
            })
    </script>
</body>
</html>