我想创建一个页面,您可以在其中添加1到n种产品。
我已经与AngularJS一起工作了几个月,但我很难想到这一点。
我强化的html代码是这样的:
https://plnkr.co/edit/2MYbkYeAf4lZSRIh2c8l?p=preview
这是整个模板:
<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>
这是我要重复的部分:
<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代码部分都应在第一个div下面重复。这样,用户可以选择他想要的所有产品以及他想要的数量。
我当时正在考虑创建模板,但这已经是一个模板...我正在使用ui-router来做路由部分,但是我从未在模板内重复模板,也从未在以下位置使用模板内的模板全部。
此外,这种方法还给我带来了一些疑问:
谢谢阅读。
由于您没有显示任何控制器,因此我只能提供解决方案的抽象概念。无论如何,这里。
重复的
使用可以完成对数据收集的简单循环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>
禁止用户选择重复的产品
您也可以通过在控制器中操作集合来实现此目的。这次,该系列将保留仍可供选择的产品。Angular将帮助您使用ngOptions
指令将更改从控制器传播到您的视图
<select
ng-options="product as product.label for product in productsAvailable track by product.id"
ng-change="selectProduct(product.id)">
</select>
该selectProduct
方法将负责从productsAvailable
集合中删除产品。请记住,它还必须“撤回”更新中未使用的任何产品。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句