Question

我看到一个样本工作就像下面的那样...在看到这个例子之后，我有几个问题要理解angular.copy任何一个帮助我理解的问题？

这里有完整的代码，包含html和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>

点击后我从按钮传递汽车，car.plate如何从输入框恢复到park(car)功能？
我们可以简单地将对象推送到数组，然后是什么原因使用$scope.cars.push(angular.copy(car));它对我们做了什么呢？
我们为什么要删除对象delete $scope.car;？

任何人请帮我理解角度背后的这个逻辑吗？

Here is the working example

Answer 1

Angular会在名为car的范围内自动为您创建一个属性，并使用文本输入填充plate car属性。

然后代码创建该对象的“深层副本”以推入阵列。 angular.copy创建对象的“深层副本”，而不是仅仅将对象的引用推送到数组中。阅读更多：https://docs.angularjs.org/api/ng/function/angular.copy

删除$ scope.car对象只是从$ scope中删除该属性的一种快速方法，因此如果用户键入新的板号，则angular将重新创建它

Answer 2

你真的不需要在你展示的例子中使用angular.copy。

因为当您将car.plate声明为文本框的ng-model时，会在范围内自动为您创建汽车对象。
谁说你需要在这里使用angular.copy？想象一下，你在每辆车旁边都有一个编辑按钮，你想打破2 办法在故事中显示的汽车和正在显示的汽车之间的绑定例如，编辑，直到用户点击确认编辑按钮，然后使用angular.copy制作正在显示的对象的副本在ng-repeat中，使得在用户输入时它不会改变一些东西。 angular.copy用于中断对象的引用。如果删除这些导致[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys.错误，则可以通过跟踪来解决。有效使用angular.copy每次传递时都会创建一个新的汽车对象进入阵列。
要创建每次添加新的汽车对象到列表，您可以删除范围属性，以便将其重新实例化为新对象，或将$ scope.car的副本传递给列表，以便它将每个项目视为一个不同的实体。

Angular.copy - 需要更多说明

2 个答案: