CODEWITHSUNDEEP
javascripthtmlangularjs
mvasco
mvasco

Reputation: 5107

Modal window in HTML

I have a table in a HTML file. It is populated from JSON.

Inside one of the cells I want to include a link that should open a modal window.

It works fine, but I want to show on this modal window information about the table row where the link is included.

This is part of the code:

<tbody>
    <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
        <td>{{data.material_number}}</td>
        <td>{{data.material_name}}</td>
        <td>{{data.material_price}}

         <a href="#openModal">Open Modal</a>

            <div id="openModal" class="modalDialog">
                <div>
                    <a href="#close" title="Close" class="close">X</a>
                    <h2>{{data.material_name}}</h2>
                    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
                    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>

                </div>

            </div>

        </td>
        <td>{{data.currency_name}}</td>
        <td>{{data.material_price_date}}</td>
        <td>{{data.unit_name}}</td>
        <td>{{data.provider_name}}</td>
        <td>{{data.material_active}}</td>

        <td><a href="edit_material.php?id={{data.id_material}}" class="btn btn-info" role="button">Edit</a></td>
    </tr>
</tbody>

My problem is that inside the H2 tag that is shown in the modal window, the data from {{data.material_name}} are not the data from the selected row, but the data from the first row in the table.

Any help is welcome.

Thank you in advance.

Upvotes: 1

Views: 112

Answers (1)

Naitik Adani
Naitik Adani

Reputation: 236

HTML Code: Try using ng-click and passing the row data as a parameter as follows

  <a ng-click="openModal(data)">Open Modal</a>

        <div id="openModal" ng-show="showModal" class="modalDialog">
            <div>
                <a href="#close" title="Close" class="close">X</a>
                <h2>{{modaldata.material_name}}</h2>
                <p>This is a sample modal box that can be created using the powers of CSS3.</p>
                <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>

            </div>

        </div>

Controller:

$scope.openModal = function(data){
  $scope.showModal = true;
  $scope.modaldata = data;
}

Upvotes: 1

Related Questions