Html 使用AngularJS在单击按钮时重复代码
我想创建一个页面,您可以在其中添加1到n个产品 我和AngularJS一起工作了几个月,但我很难想到这一点 我想到的html代码是这样的: 这是整个模板:Html 使用AngularJS在单击按钮时重复代码,html,angularjs,json,Html,Angularjs,Json,我想创建一个页面,您可以在其中添加1到n个产品 我和AngularJS一起工作了几个月,但我很难想到这一点 我想到的html代码是这样的: 这是整个模板: <div class="container text-center"> <h1>Make a sale</h1> <br> <form> <div class = "divedp"> <label f
<div class="container text-center">
<h1>Make a sale</h1>
<br>
<form>
<div class = "divedp">
<label for="idNumeroFactura" class="col-form-label" >Invoice number: </label>
<input name="inpNumeroFactura" id="idNumeroFactura" maxlength= "8" type="text" ng-model="numeroFactura" class= "form-control"/>
</div>
<h6 class="small">products</h6>
<div class = "divedp">
<label for="idProducto">Product: </label>
<select name="sltProducto" ng-options ="producto.nombreProducto for producto in productos"
ng-model="producto" class="form-control input-sm" id="idProducto">
<option value="">-Choose the product-</option>
</select>
<br>
<label for= "idCantidad" >Quantity: </label>
<select ng-model="cantidad" id="idCantidad" class="form-control input-sm">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br>
<button ng-click="showDiv=true; agregarProducto()" class="btn btn-default" ng-hide="showDiv"> Add another product</button>
</div>
<div ng-show="showDiv"> Here should appear the new product</div>
<button ng-click="guardarVenta()" class="btn btn-primary" type="submit">Save sale</button>
</form>
<span >{{mensaje}}</span> <br>
</div>
出售
发票号码:
产品
产品:
-选择产品-
数量:
1.
2.
3.
4.
5.
6.
7.
8.
9
添加其他产品
这里应该会出现新产品
储蓄销售
{{mensaje}}
这是我想重复的部分:
<div class = "divedp">
<label for="idProducto">Product: </label>
<select name="sltProducto" ng-options ="producto.nombreProducto for producto in productos"
ng-model="producto" class="form-control input-sm" id="idProducto">
<option value="">-Choose the product-</option>
</select>
<br>
<label for= "idCantidad" >Quantity: </label>
<select ng-model="cantidad" id="idCantidad" class="form-control input-sm">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br>
<button ng-click="showDiv=true; agregarProducto()" class="btn btn-default" ng-hide="showDiv"> Add another product</button>
</div>
产品:
-选择产品-
数量:
1.
2.
3.
4.
5.
6.
7.
8.
9
添加其他产品
因此,当我单击“添加另一个产品”按钮时,所有div代码部分都应该在第一个div下面重复。这样,用户就可以根据需要的数量选择所有需要的产品
我想创建一个模板,但这已经是一个模板。。。我使用ui路由器来完成路由部分,但我从未在模板中重复过模板,也从未在模板中使用过模板
此外,这种做法也让我产生了一些疑问:
- 如何连接Json数组上的属性?(我使用Json在前端和后端之间通信)
- 如何避免用户重复相同的产品项目?我应该把这个问题交给AngularJS控制器还是可以用指令来处理
谢谢阅读。因为您没有显示任何控制器,所以我只能提供解决方案的抽象概念。反正是这样 重复 使用
ngRepeat
完成数据收集的简单循环。在控制器中,您需要操纵集合,angular将为您传播更改
<div ng-repeat="productBlock in productBlocks track by productBlock.id">
<!-- your repeated code here -->
<button ng-click="removeProductBlock(productBlock.id)"> remove </button>
</div>
<button ng-click="addProductBlock()"> add </button>
selectProduct
方法将负责从productsAvailable
集合中删除产品。
请记住,它还必须“放回”更新时未使用的任何产品
这似乎是一个很好的方法,让我来研究一下,然后告诉你。看,我做了一个plnkr。你现在能说得更具体些吗?我已经在重复上阅读了angular文档,但我仍然没有得到模板而不是对象的文档。是的,我正在处理这个。。。你要求更多的代码,所以我给你。我不接受你的回答,因为我仍然无法证明这一点,冷静点。谢谢,再见
<select
ng-options="product as product.label for product in productsAvailable track by product.id"
ng-change="selectProduct(product.id)">
</select>