asked on

Open & Close modal in grid in Angularjs

Hi,

I have a grid which is bound by ng-repeat. Each (A) Row has button to open the (B)Popup Modal .
The modal has close button within.
/// <i class="icon-close-thin default close-x" ng-click="$ctrl.closeTogglePopover()"></i>

I am using this property:
/// popover-is-open="$ctrl.openSalesModel" {{$index}}

But it doesn't Work. I used index so that I open only one modal for that particular row when it is clicked.
I planned to set the property popover-is-open= true or false for each row.

Thanks. please guide for any directions..... if you need further details let me know.....

(A) Row
<tr><td> Name</td> </tr>
<tr><td>
<td style="width:1px">
                    <a href=""
                       uib-popover-template="'TeamPopover.html'"
                       popover-placement="auto bottom"
                       popover-trigger="outsideClick" 
                       popover-is-open="$ctrl.openSalesModel" {{$index}}  -- Doesnt Work
                       ng-click="$ctrl.showTeam(study,$index)"><i class="fa fa-group"></i></a>

</td>
</tr>

(B) Popup Modal
<script type="text/ng-template" id="TeamPopover.html">
    <div ng-hide="$ctrl.getTeamResult">
        Retrieving team information...
    </div>
    <div ng-show="$ctrl.getTeamResult" class="style-overflow-table">
        <i class="icon-close-thin default close-x" ng-click="$ctrl.closeTogglePopover()"></i>  -- Need a to Close 
        <h6 class="teamTitle">Company Contacts</h6>
        <div class="">
            <table class="popover-table" border="0">
                <tr ng-repeat="contact in $ctrl.getTeamResult.contacts">
                    <td class="text-right">{{ contact.phone }}</td>
                </tr>
            </table>
        </div>
        <h6 class="teamTitle">My Team</h6>
        <div class="">
            <table class="popover-table" border="0">
                <tr ng-repeat="member in $ctrl.getTeamResult.teamMembers">
                    <td><i ng-if="member.Lead" class="fa fa-star star-warning"></i>
                    <span ng-if="!member.Lead"> &nbsp;&nbsp;&nbsp;</span>
                    <a ng-href="mailto:{{ member.user.email }}">{{ member.user.fullName }}</a>
                    </td>
                    <td>{{ member.user.title }}</td>
                    <td class="text-right">{{ member.user.phone }}</td>
                </tr>
            </table>
        </div>
    </div>
</script>

Open in new window

Julian Hansen

popover-is-open="$ctrl.openSalesModel" {{$index}}  -- Doesnt Work

Open in new window

What is {{$index}} doing there?
Where are you setting the state of openSalesModel

leakim971

<tr><td>
<td style="width:1px">
                    <a href=""
                       uib-popover-template="'TeamPopover.html'"
                       popover-placement="auto bottom"
                       popover-trigger="outsideClick" 
                       popover-is-open="$ctrl.openSalesModel" 
                       popover-index="$index"  -- Doesnt Work
                       ng-click="$ctrl.showTeam(study,$index)"><i class="fa fa-group"></i></a>

</td>
</tr>

Open in new window

and read the popover-index attribute in your popup component just like placement

Member_2_7967608

ASKER

I have ng-repeat="study in $ctrl.myStudieslist"

I am using $index ng-repeat to set an row id to each popover. Details in the link.
https://docs.angularjs.org/api/ng/directive/ngRepeat

Basically $index property is not working for me in the code.

The idea for
popover-is-open="$ctrl.openSalesModel" {{$index}}
popover-is-open=$ctrl.openSalesModel1 , popover-is-open=$ctrl.openSalesModel2....and so on for each row.

I think I need to do this else All popups for each row will be shown when each row is clicked.

Thanks
Adib

Member_2_7967608

ASKER

@leakim971 to your point how do access the row popup index value in Angularjs Code.

Julian Hansen

Can you not make your popover-is-open an array

popover-is-open="$ctrl.openSalesModel[$index]"

Open in new window

leakim971

no, angular create a mini controller for each row, just use your $index to use the right object/info from parent controller

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Open &amp; Close modal in grid in Angularjs

Open & Close modal in grid in Angularjs