根据angularjs中的点击次数更新视图

我想更新我的视图（一个输入表单），将产品添加到数据库中。对于单个产品，我可以通过将其放入数组来添加它，但现在我想添加多个产品，单击“添加更多产品”按钮，将在现有表单下方生成一个类似的视图（表单），这可以进行多次（在运行时确定）。现在我有两个问题： 1.如何通过每次单击（添加更多产品）按钮更新我的视图。是通过保持一些计数来完成的吗？ 2.如何将每个表单中的多个产品值添加到对象数组中

$scope.onClick=函数（）{
$scope.productData=
{
名称：$scope.name，
description:$scope.description，
价格：$scope.price，
image:$scope.image，
标记：$scope.tags，
合作伙伴id:$scope.partner\u id，
};
}

示例代码 有很多方法可以做到这一点。我制作了这个示例plunker，它显示了一个简单的选项，切换表单div，在表单中添加数据，然后将结果表单对象推送到primary products数组

编辑：我重构了我的plunk和代码片段，以使用Javascript类和构造函数。如下所示克隆主对象是执行此任务的另一种方法

（请参阅此答案底部的完整片段。）

解释 在代码中，对所有对象属性使用$scope。实际上，您应该创建一个顶级作用域数组，它是从服务器检索产品的结果。实际上，我将创建一个JavaScript构造函数/类，它与数据库中所需的product对象相匹配（为简洁起见，我刚刚创建了一个“master”对象和一个克隆的“newProduct”对象来进行编辑）：

您可以使用

ng model

将

$scope.newProduct

对象绑定到表单

<!-- ==== Simplified Form ==== -->
<form class="form" ng-submit="submitNewProduct()">
  <div class="form-group">
    <label>Product Name: </label>
    <input class="form-control" type="text" ng-model="newProduct.name" >
   </div>
   <input type="submit" class="btn btn-info" />
</form>

如果您没有使用构造函数，请务必注意，我已将

$scope.newProduct

对象重置为默认值，以便在再次打开新产品表单时不会进行任何新更改

// Reset placeholder product
$scope.newProduct = $scope.masterProduct;

有用的资源

• 教程视频：
• Javascript构造函数：
• 请重复示例：

一小条

（函数（）{
“严格使用”；
var-app=angular.module（“myApp”，[]）；
应用控制器（“myController”，myController）；
myController.$inject=[“$scope”、“$timeout”、“$filter”]；
函数myController（$scope、$timeout、$filter）{
$scope.loading=false；
类产品{
构造函数（名称、说明、价格）{
this.id=this.getNewId（）；
this.name=\u name；
this.description=\u description；
this.price=\u price；
此文件名为“.image=”https://www.thesweetexplosion.co.uk/wp-content/uploads/2013/06/product-placeholder.jpg";
this.tags=[]；
此.partner_id=0；
}
getNewId（）{
var latestId=$scope.products[$scope.products.length-1].id
返回latestId+1；
}
}
//假装我们从数据库收到了这些产品。。。
$scope.products=[{
id:0，
名称：“产品_1”，
描述：“产品描述”，
价格:52.23，
图像：“https://raspberrypi.dk/wp-content/uploads/2014/07/raspberry-pi-model-b-plus1.png",
标签：[]，
合伙人编号：345214967
}, {
id:1，
名称：“产品2”，
描述：“产品描述”，
价格:46.23，
图像：“https://modtronix.com.au/wp-content/uploads/enc-rpi3-official_bottom_ll-100x100.jpg",
标签：[]，
合伙人编号：514852924
}];
//使用此基本对象添加新产品
$scope.placeholder产品={
id:0，
姓名：“，
说明：“，
价格:0.00,，
图像：“https://www.thesweetexplosion.co.uk/wp-content/uploads/2013/06/product-placeholder.jpg",
标签：[]，
合作伙伴id:0
};
$scope.createNewProduct=函数（）{
$scope.newProduct=新产品（“，”，0）；
}
$scope.submitNewProduct=函数（）{
//在这里进行服务器更新吗
//显示加载
$scope.updateing=true；
//模拟服务器更新
$timeout（函数（）{
//如果服务器更新成功，请将新产品添加到产品阵列
$scope.products.push（$scope.newProduct）；
//重置提交按钮
$scope.updateing=false；
//重置占位符产品
$scope.newProduct={}；
//隐藏产品形式
$scope.addProductForm=false；
}, 1000);
}
}
})();
.productImg{
宽度：50px；
高度：50px；
}
.产品形式{
边缘顶部：15px；
边缘底部：15px；
;
}

AngularJS（1.3.1）-使用ES6类构造函数实例化产品
添加新产品
清楚的
产品名称：
说明：
价格：
合作伙伴Id：
更新。。。
名称
描述
价格
形象
标签
合作伙伴Id
{{product.name}
{{product.description}}
{{pr
// If server update is successful, add new product to products array
$scope.products.push($scope.newProduct);

// Reset placeholder product
$scope.newProduct = $scope.masterProduct;