Question

我觉得这很简单，或者我做错了。我有一个引导表，并希望在单击按钮时在行内添加行。目前它正在向表中添加行。我没有使用表格和学习。

           <thead>
                <tr>
                    <th>Products</th>
                    <th>Quantity</th>
                    <th></th>
                </tr>
            </thead>

解决我的问题。 {@ 3}}根据@Coldstar的回答

我试过了什么。

1）嵌套表没有用。 2）重新安排我的<tr>

请尽可能提供帮助。

预期结果：

想要在产品列表

之后添加行

->Row of Product 1
 -->Row of the Delivery inside Row of Product 1
->Row of Product 2
 -->Row of the Delivery inside Row of Product 2

Answer 1

这对你有用吗？

<table class="table table-striped">
    <tr ng-repeat="product in deliveryData">
        <td>{{product.productName}}</td>
        <td><a href ng-click="addItem($index)" class="btn btn-primary">Add delivery address</a></td>
        <td>
            <table class="table table-striped">
                <tr ng-repeat="delivery in product.deliveries">
                    <td>{{delivery.description}}</td>
                    <td>{{delivery.quantity}}</td>
                    <td><a href ng-click="removeDelivery($parent.$index, $index)" class="btn btn-primary">Remove</a></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

在控制器中:( $ scope.delivery实际上应来自静态表单以供将来参考，因此您可以避免使用copy（）函数）

    $scope.delivery = {
        description: 'Hello World',
        quantity: 2
    };

    $scope.deliveryData = [
        {
            productName: 'Product A', quantity: '20', deliveries: []
        },
        {
            productName: 'Product B', quantity: '10', deliveries: []
        }
    ];


    $scope.addItem = function ($index) {
        var d = angular.copy($scope.delivery);
        $scope.deliveryData[$index].deliveries.push(d);
    };

    $scope.removeDelivery = function (par, chi) {
        $scope.deliveryData[par].deliveries.splice(chi, 1);
    };

Answer 2

如果你想使用bootstrap使用的力量：

<div class="container">
    <div class="row">
        <div class="col-md-5">
        </div>
    </div>
</div>

来自bootstrap的div更容易设置样式，也可以动态添加任何内容。这就是bootstrap所指的网格系统，可以在这里看到：

http://getbootstrap.com/examples/grid/

http://getbootstrap.com/css/#grid

在Angular中添加循环行内的行

2 个答案: