Repeat code on button click with AngularJS - html

Question

I want to create a page where you can add from 1 to n products dinamically.
I've been working with AngularJS for a couple of months but it's kind of difficult for me to think this.
The html code I tought about it's something like this:
https://plnkr.co/edit/2MYbkYeAf4lZSRIh2c8l?p=preview
Here it is the entire template:
<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>
And this is the part I want to repeat:
<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>
So when I click add another product button, all div code part should repeat below the first div. This way, the user can choose all products he want with the quantity he want.
I was thinking on creating a template, but this is already a template... I'm using ui-router to do the routering part, but I never repeated a template inside a template, and I never used a template inside a template at all.
Besides, this approach gives me some doubts:
How can I concatenate an attribute on a Json array? (I use Json to communicate between frontend and backend)
How can I avoid users to repeat the same product item? should I take this problem to an AngularJS controller or can I handle it with directives?
Thanks for reading.

Answer 1

Since you didn't show any controller, I can provide only abstract idea of solution. Here goes anyway.
Repeating
Simple looping over collection of data is done with ngRepeat. In your controller, you need to manipulate the collection and angular will propagate the change for you
<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>
ngRepeat documentation
Prohibiting user from selecting duplicate product
You can achieve this, again, with manipulating a collection in your controller. This time, the collection would hold products still available to choose. Angular will help you with propagating the change from controller to your view with the ngOptions directive
<select
ng-options="product as product.label for product in productsAvailable track by product.id"
ng-change="selectProduct(product.id)">
</select>
The selectProduct method will be responsible for removing the product from productsAvailable collection.
Keep in mind that it also has to "put back" any products not being used on update.
ngOptions documentation