Member_2_7967608
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.closeToggl ePopover() "></i>
I am using this property:
/// popover-is-open="$ctrl.ope nSalesMode l" {{$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.....
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.closeToggl
I am using this property:
/// popover-is-open="$ctrl.ope
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"> </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>
<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>
and read the popover-index attribute in your popup component just like placement
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.ope nSalesMode l" {{$index}}
popover-is-open=$ctrl.open SalesModel 1 , popover-is-open=$ctrl.open SalesModel 2....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
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.ope
popover-is-open=$ctrl.open
I think I need to do this else All popups for each row will be shown when each row is clicked.
Thanks
Adib
ASKER
@leakim971 to your point how do access the row popup index value in Angularjs Code.
Can you not make your popover-is-open an array
popover-is-open="$ctrl.openSalesModel[$index]"
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window
What is {{$index}} doing there?Where are you setting the state of openSalesModel