Use Angular to copy object properties - without values - to another object

StackOverflow https://stackoverflow.com/questions/21742974

Question

We have tried angular.copy and angular.extend. Both of these, though, copy property values. How do we copy one object's properties, without their values, to another object?

Here is a fiddle with our attempts based on how-to-quickly-clear-a-javascript-object.

angular.module('App', []);

function Ctrl($scope) {

    function copyNotValues(obj) {
        var newObj = angular.copy(obj);
        for (prop in newObj) {
            if(newObj.hasOwnProperty(prop))
            {
                newObj[prop] = null;
            }
        };
        return newObj;
    }

    $scope.master = {
        foo: 'original foo',
        bar: 'original bar'
    };

    $scope.copy = angular.copy($scope.master);
    $scope.extend = angular.extend($scope.master);
    $scope.copyNotValues = copyNotValues($scope.master);

}
Was it helpful?

Solution

JavaScript doesn't have the concept of classes. It uses Prototype inheritance which means you can only create a new object by copying another object. When doing that you get the properties.

You can get around this by creating a "master" object without property values. Something like this:

master = {
  foo: '',
  bar: ''
};

Then you can create new 'instances' of the object with the new keyword:

$scope.master = new master();
$scope.master.foo = 'original foo';
$scope.master.bar = 'original bar';

When you need to create a new instance of the object, go back to the original, not your copy:

$scope.masterCopy = new master();

This is really a JavaScript issue and not an Angular specific issue. I suppose you could, theoretically, write a function to create a new instance of an object and then loop over the properties to set them all to null or empty strings.

OTHER TIPS

My solution is as follows you can use angular.copy and pass the object .Before that define the object with blank curly braces.The code is as follows.I have used some other example,but the underline approach is same.

angular.module('formExample', [])
  .controller('ExampleController', ['$scope', function($scope) {

    $scope.sa = {}; //declaring sa object
    $scope.ba = {}; //declaring ba object
    $scope.update = function() {
      $scope.ba = angular.copy($scope.sa);
    };

  }]);
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example32-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>



</head>

<body ng-app="formExample">
  <div ng-controller="ExampleController">
    <form novalidate class="simple-form">
      <h3>Shipping Address</h3>
      Name:<input type="text" ng-model="sa.name" ng-change="sameAddress && update()" placeholder="in" /><br/> Age:
      <input type="text" ng-model="sa.age" ng-change="sameAddress && update()" placeholder="age" />
      <br /> Street:

      <br />

      <h3>Billing Address
        <input type="checkbox" ng-model="sameAddress" ng-change="sameAddress && update()" />Copy
      </h3>

      Name:<input type="text" ng-model="ba.name" ng-disabled="sameAddress" placeholder="out" /><br/> Age:
      <input type="text" ng-model="ba.age" ng-disabled="sameAddress" placeholder="age" />
      <br />

      <br />

    </form>

  </div>


</body>

</html>

The pluner is here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top