在 Angular 中单击时复制 div答案

【问题标题】：Copying a div on click in Angular在 Angular 中单击时复制 div
【发布时间】：2026-01-17 01:10:01
【问题描述】：

我正在尝试在使用 Angular.js 单击按钮时复制和粘贴 div。这是我的密码笔：http://codepen.io/summerfreeze/pen/VjqJYW。我希望“添加订单行”按钮添加另一个 .orderline div。我是 Angular 的新手，显然我犯了一些错误，因为它不起作用。代码有什么问题？

$scope.orderlines=[]  
$scope.orderline = '';
$scope.addline = function(){
    $scope.items.push($scope.orderline); 
};

【问题讨论】：

乍一看有几个错误：$scope.items.push($scope.orderline); => $scope.orderlines.push($scope.orderline);接下来，您不会对 orderlines 数组进行 ngRepeat。因此，您也将始终进行 1 行更改
我有一个“
”。错了吗？

标签： javascript angularjs

【解决方案1】：

我更新了你的代码笔。我做到了：

将 $scope.orderline 从对象更改为字符串。它现在代表一个订单行。当用户从表单中输入值时使用它：

$scope.orderline = {};

更改 qty 和 total 的绑定（现在绑定到 $scope.orderline）：

<input ng-model="orderline.quantity" placeholder="Quantity">
<div flex >{{orderline.quantity * selectedItem.price}}</div>

更改 ng-repeat（现在在订单行上循环，项目被命名为行）：

<div ng-repeat='line in orderlines'>
         {{line}}
     </div>

最后，更新 addLine 以复制 orderLines 中的订单行：

$scope.addline = function(){
    $scope.orderline.name = $scope.selectedItem;
    $scope.orderlines.push(angular.copy($scope.orderline)); 
};

这里是更新的 plunker http://codepen.io/anon/pen/NAJqZy

【讨论】：

当您单击“添加订单行”时，将使用订单行数据创建新的 div。这不是预期的吗？
完全一样。但现在“添加项目”不起作用;__;
只是绑定错误，已更新。但是现在你有一个订单行的集合，所以添加项目不能应用单一。所以我在每一行中移动它。如果你想要一个全局按钮，你必须在每一行上循环并添加它
尝试更新函数 OrderLine 并添加 product: '' 以返回对象
是的，在代码笔中它删除了控制台日志。这个日志是由指令 md-autocomplete 抛出的，我不知道。如果问题仍然存在，可以在该库的文档中搜索

【解决方案2】：

我想知道我是否明白你的想法，将它们放在一个列表中并使用你的数据进行切换

[http://codepen.io/postor/pen/OXqVvp][1]

【讨论】：

不，你只是添加一行，我想复制 .orderline div