javascript - Angular.copy - 需要更多说明

标签 javascript angularjs

我看到了一个如下所示的示例工作。在我看到这个示例后,我有几个问题需要理解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>
  1. 点击按钮后,我正在传递一辆汽车,car.plate 如何从输入框检索到 park(car) 函数?

  2. 我们可以简单地将对象推送到数组,那么使用 $scope.cars.push(angular.copy(car)); 的原因是什么,它为我们做了什么到底是?

  3. 为什么我们要删除对象delete $scope.car;

有人可以帮我理解 Angular 背后的逻辑吗?

Here is the working example

最佳答案

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

然后,代码创建该对象的“深拷贝”以插入数组。 angular.copy 创建对象的“深拷贝”,而不是仅仅将对该对象的引用插入数组中。了解更多:https://docs.angularjs.org/api/ng/function/angular.copy

删除 $scope.car 对象只是从 $scope 中删除该属性的一种快速方法,因此如果用户输入新的车牌号码,Angular 将重新创建它

关于javascript - Angular.copy - 需要更多说明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27394157/

相关文章:

mysql - 在尝试使用 spring mvc Angular JS 保存数据时在数据库中存储空值

javascript - 带有子对象的 Ng 选项

javascript - 处理输入禁用的正确方法?响应式JS

javascript - Heroku process.env 不显示配置变量

javascript - Protractor 自定义定位器无法定位元素

javascript - 如何在javascript中从一个数组和一个int文字的json中检索值

angularjs - 修改 Accordion 使其表现得像 table 一样

javascript - 为什么注册按钮没有注册用户名和密码?

javascript - AJAX 调用重新加载仅有效一次

jquery - 运行 'ng test'命令时找不到JQuery