how to pass index to a script in angularjs

Question

I have the following angular.js code:

<table ng-repeat="item in myCollection">
    <tr>
        <td>
            <span>
                <i uib-popover-template="'myPopoverTemplate'"   <!--I want to pass $index to myPopoverTemplate-->
                popover-trigger="mouseenter" type="button"></i>
                <strong>{{item.Amount}}</strong>
            </span>       
        </td>
    </tr>
</table>

<script type="text/ng-template" id="myPopoverTemplate">
   <p>{{myCollection[...].reference}}</p>  <!--pass index to here-->
</script>

So basically I want to pass index to a script. If I couldn't do it, how can modify the code base to make it work?

I think [this](https://stackoverflow.com/questions/25565475/pass-parameter-to-angular-ng-include) may help you — Raxel21, Feb 03 '22 at 02:07
@Raxel21 Thank you for your answer. yes I can use ng-include directive, but I don't want to load it in the page, I only want to display the script content when mouseover the element, so how can I do it? — sydevloper, Feb 03 '22 at 03:07

score 0 · Answer 1 · answered Feb 03 '22 at 04:38

You can move the template code into the ng-repeat block.

<table ng-repeat="item in myCollection">
    <tr>
        <td>
            <span>
                <i uib-popover-template="'myPopoverTemplate'"   
                popover-trigger="mouseenter" type="button"></i>
                <strong>{{item.Amount}}</strong>
            </span>       
        </td>
    </tr>
    <script type="text/ng-template" id="myPopoverTemplate">
      <p>{{item.reference}}</p> 
    </script>
</table>

how to pass index to a script in angularjs

1 Answers1