CODEWITHSUNDEEP
javascriptangularjs
3gwebtrain
3gwebtrain

Reputation: 15303

Angular.copy - require more clarification

I seen a sample work as like the folloing.. after I see this example i had couple of questions to understand the angular.copy any one help me to understand?

here is the full of code with html and js:-

<!DOCTYPE html>
<html ng-app="parking">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Car Parking</title>
    <link rel="stylesheet" href="">
    <script src="js/angular.js"></script>
    <script>
        var myApp = angular.module("parking", []);
        myApp.controller('parkingCtrl', ['$scope', function($scope){

            $scope.cars = [
                {plate: '6MBV006'},
                {plate: '5BBM299'},
                {plate: '5AOJ230'}
            ]

            $scope.park = function (car) {
                $scope.cars.push(angular.copy(car));
                console.log(angular.copy(car));
                delete $scope.car;
            }

        }]);
    </script>
</head>
<body ng-controller="parkingCtrl">
    <h3>[Packt] Parking</h3>
    <table>
        <thead>
            <tr>
                <th>Plate</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td ng-repeat="car in cars">{{car.plate}}</td>
            </tr>
        </tbody>
    </table>
    <label for="plate">
        <input type="text" ng-model="car.plate">
    </label>    
    <button ng-click="park(car)">Park</button>
</body>

  1. After I clicking I am passing a car from button, how the car.plate retrived from input box to park(car) function?

  2. We can simply push the object to array, then what is the reason to use the $scope.cars.push(angular.copy(car)); what it does for us exactly?

  3. why should we delete the object delete $scope.car;?

Any one please help me to understand this logic behind the angular please?

Here is the working example

Upvotes: 0

Views: 189

Answers (2)

ms87
ms87

Reputation: 17492

Well you really don't need to use angular.copy in the example you've shown.

  1. Because when you declare car.plate as the ng-model of the text box, a car object is automatically created for you on the scope.

  2. Who said you need to use angular.copy here? Imagine you had an edit button next to each of those cars, and you wants to break the 2 way binding between the car displayed in the tale and the one being edited, for example until when the user clicks a confirm edit button, then you use angular.copy to make a copy of the object being displayed in the ng-repeat such that it doesn't change while the user is typing something. angular.copy is used to break the reference to an object. If removing those results in a [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. error, then that could be solved by a track by. Effectively using angular.copy creates a new car object every time it's passed into the array.

  3. To create add a new car object every time to the list, you can either delete the scope property so that it's re instantiated as a new object, or pass a copy of $scope.car to the list so that it treats each item as a different entity.

Upvotes: 1

link64
link64

Reputation: 1976

Angular is automatically creating a property for you on the scope called car and populating the plate property of car with the text input.

The code is then creating a 'deep copy' of that object to push in to the array. angular.copy creates a 'deep copy' of the object instead of just pushing the reference to that object in to the array. Read more: https://docs.angularjs.org/api/ng/function/angular.copy

Deleting the $scope.car object is just a quick way of removing that property from the $scope so angular will recreate it if the user types in a new plate number

Upvotes: 1

Related Questions