Adding row inside row of a loop in Angular

Question

I have a feeling this is either very simple or I am doing it wrong. I have a bootstrap table and want to add row inside a row when the button is clicked. Currently it is adding the row to the table. I have not worked with tables and learning.

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

Working plunker to my problem. http://plnkr.co/edit/FMICwZC22KwzcYBGESAz?p=preview according to answer by @Coldstar

What I have Tried.

1) Nested Table did not worked. 2) Rearranging my <tr>

Please help where you can.

Expected Result:

Want to add the Row after the product list

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

because you are using table layouts that is virtually impossible — RadleyMith
– RadleyMith, Commented Nov 18, 2014 at 0:54
@Bradgnar not impossible if use ng-repeat-start along with ng-repeat-end — charlietfl
– charlietfl, Commented Nov 18, 2014 at 1:00
I still feel like @GeekOnGadgets would be better off using the grid system — RadleyMith
– RadleyMith, Commented Nov 18, 2014 at 1:02

Coldstar · Accepted Answer · 2014-11-18 22:00:11Z

1

Will this work for you:

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

In the controller: ($scope.delivery should actually come from a static form for future reference so you can avoid the copy() function)

    $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);
    };

edited Nov 18, 2014 at 22:00

answered Nov 18, 2014 at 20:39

Coldstar

1,3511 gold badge12 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

GeekOnGadgets Over a year ago

I tried your solution. Its behaving same as what I have got.The problem now is when I click on button to add delivery for product A it add both to Product A and B. Can you please look at plunker?.

Coldstar Over a year ago

ok fixed example. worked fine locally for me. with proper nesting, you should avoid using ng-repeat-start and ng-repeat-end

GeekOnGadgets Over a year ago

Thanks :). But now the removeItem does not work. I am getting the index of the addItem and passing it to removeItem, but only works first one. Any Idea where I am being N00b?

Coldstar Over a year ago

Can you post code or update plunkr. All you really have to do is to pass the 'delivery' item to a function like remove(delivery) and pop it from its parent list. or make use of the $parent.$index

GeekOnGadgets Over a year ago

That's the first thing I tried did not worked. Update my Plunker :)

RadleyMith · Accepted Answer · 2014-11-18 00:57:14Z

0

if you want to use the power of bootstrap use:

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

The divs from bootstrap are much easier to style, also you can dynamically add anything inside of a row. This is what bootstrap refers to as its grid system and can be seen here:

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

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

answered Nov 18, 2014 at 0:57

RadleyMith

1,34311 silver badges22 bronze badges

Collectives™ on Stack Overflow

Adding row inside row of a loop in Angular

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related