使用 AngularJS 在按钮单击上重复代码

Question

我想创建一个页面，您可以在其中动态添加 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 来做路由部分，但我从未在模板中重复模板，我也从未在里面使用过模板一个模板。

此外，这种方法让我有些疑惑：

• 如何连接 Json 数组上的属性？ （我使用Json进行前后端通信）
• 如何避免用户重复相同的产品项目？我应该把这个问题交给 AngularJS 控制器还是可以用指令来处理？

感谢阅读。

Answer 1

由于您没有显示任何控制器，我只能提供解决方案的抽象概念。还是这样吧。

重复

使用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>

ngRepeat documentation

禁止用户选择重复产品

您可以再次通过在控制器中操作集合来实现此目的。这一次，该系列将保留可供选择的产品。 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 集合中删除产品。 请记住，它还必须“放回”任何未在更新时使用的产品。

ngOptions documentation