试着理解角，收到

Trying to understand angular.copy

本文关键字：收到      更新时间：2023-09-26

我试图理解什么角。复制就可以了。我在Angular js文档中见过一个例子，但无法弄清楚为什么重置按钮在填满所有文本字段并点击保存按钮后不起作用。但如果我们在点击保存之前点击重置按钮，它就会起作用。有人能解释一下吗?提前感谢

index . html: 

<div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    <label>Name: <input type="text" ng-model="user.name" /></label><br />
    <label>Age:  <input type="number" ng-model="user.age" /></label><br />
    Gender: <label><input type="radio" ng-model="user.gender" value="male" />male</label>
            <label><input type="radio" ng-model="user.gender" value="female" />female</label><br />
    <button ng-click="reset()">RESET</button>
    <button ng-click="update(user)">SAVE</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</div>

script.js: 

angular.
  module('copyExample', []).
  controller('ExampleController', ['$scope', function($scope) {
    $scope.master = {};
    $scope.reset = function() {
      // Example with 1 argument
      $scope.user = angular.copy($scope.master);
    };
    $scope.update = function(user) {
      // Example with 2 arguments
      angular.copy(user, $scope.master);
    };
    $scope.reset();
  }]);

在您点击重置之前，$scope.user甚至不存在。

Angular copy方法仅为from分配另一个内存实例master到user。如果您不想在不更改master的情况下更改user，则可以避免引用问题

引用在这里

你的问题是在$scope.user而不仅仅是user:

工作片段如下:

$scope.update = function(user) {
      // Example with 2 arguments
      angular.copy($scope.user, $scope.master);
    };


(function(angular) {
  'use strict';
  angular.module('includeExample', ['ngAnimate'])
    .controller('ExampleController', ['$scope', '$q',
      function($scope, $q) {
    $scope.master = {};
    $scope.reset = function() {
      // Example with 1 argument
      $scope.user = angular.copy($scope.master);
    };
    $scope.update = function(user) {
      // Example with 2 arguments
      angular.copy($scope.user, $scope.master);
    };
    $scope.reset();
      }
    ]);
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>
<body ng-app="includeExample">
  <div ng-controller="ExampleController">
    <form novalidate class="simple-form">
    <label>Name: <input type="text" ng-model="user.name" /></label><br />
    <label>Age:  <input type="number" ng-model="user.age" /></label><br />
    Gender: <label><input type="radio" ng-model="user.gender" value="male" />male</label>
            <label><input type="radio" ng-model="user.gender" value="female" />female</label><br />
    <button ng-click="reset()">RESET</button>
    <button ng-click="update(user)">SAVE</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
  </div>
</body>

相关文章：