Nested Row Creation in an Angular Loop

Question

Nested Row Creation in an Angular Loop

This task seems to be more simple once you follow the correct steps. I am working with a bootstrap table and aiming to insert a row inside another row upon clicking a button. Currently, the new row is being added directly to the table. Although tables are new to me, I am learning as I go.

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

A helpful Plunker example showcasing my issue is available at http://plnkr.co/edit/FMICwZC22KwzcYBGESAz?p=preview based on suggestions by @Coldstar

My Attempts So Far:

1) Trying a Nested Table but it was unsuccessful. 2) Adjusting the placement of my <tr> elements.

Your assistance would be greatly appreciated.

Expected Outcome:

I aim to insert a row after each product entry in the list.

->Row representing Product 1
 -->Nested Row for Delivery within Row of Product 1
->Row representing Product 2
 -->Nested Row for Delivery within Row of Product 2

javascript angularjs twitter-bootstrap angularjs-ng-repeat

Answer 1

Answer №1

Here is a suggested solution:

<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: (Be aware that $scope.delivery should ideally come from a static form for future reference to avoid using 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);
    };

Answer 2

Here is a suggested solution:

<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: (Be aware that $scope.delivery should ideally come from a static form for future reference to avoid using 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);
    };

Answer 3

Answer №2

To harness the full power of bootstrap, consider using the following structure:

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

Bootstrap's divs are much simpler to style and allow for dynamic content within a row. This functionality is referred to as the grid system in bootstrap and can be explored further at the following links:

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

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

Answer 4

To harness the full power of bootstrap, consider using the following structure:

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

Bootstrap's divs are much simpler to style and allow for dynamic content within a row. This functionality is referred to as the grid system in bootstrap and can be explored further at the following links:

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

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

Nested Row Creation in an Angular Loop

Answer №1

Answer №2

Similar questions

Troubleshooting: Sticky navigation menu shifts unexpectedly to the right upon sticking

Delete the current code within the specified div element

Troubleshooting the Google OAuth 2.0 SAMEORIGIN Issue

What is the best way to upload several files using the jansy-bootstrap file upload feature?

Updating the image source using JQuery dynamically

Utilizing D3.js v4 to showcase a JSON file on a map

Extract the color of an individual character

Browsing through json subgroups

What is the best way to consolidate multiple JS files into one main file that I can easily reference in my HTML code?

Uncovering the Android tablet browser: A guide

The method you are trying to call is not defined in Laravel

Attempting to retrieve and save data in a variable using React Native

Is it possible to determine whether a path leads to a directory or a file?

Prevent the function from being triggered repeatedly while scrolling

Clearing a textarea in jQuery

Why is React's nested routing failing to render properly?

What is the method for adjusting the increment in noUiSlider?

What is the best way to initiate a slideshow using an external .js file?

In TypeScript, use a Record<string, any> to convert to {name: string}

JavaScript failing to load specifically on Rails Spree Commerce site