Menu
Im using a simple ng-repeat to generate a list of countries. Within each list is a hidden row/div that can be expanded and collapsed.
The issue that i am facing, is that before i introduced Angular into my application, i manually hard-coded the element's ID, for example:
<li data-show="#country1"> {{country.name}} has population of {{country.population}} <div id="country1"> <p>Expand/collapse content </div> </li> <li data-show="#country2"> {{country.name}} has population of {{country.population}} <div id="country2"> <p>Expand/collapse content </div> </li> <li data-show="#country3"> {{country.name}} has population of {{country.population}} <div id="country3"> <p>Expand/collapse content </div> </li> <li data-show="#country4"> {{country.name}} has population of {{country.population}} <div id="country4"> <p>Expand/collapse content </div> </li> New code using ng-repeat:
<li ng-repeat="country in countries" data-show="????"> {{country.name}} has population of {{country.population}} <div id="???"> <p>Expand/collapse content </div> </li> How can i assign a dynamic/incremental id in my ng-repeat?
991
Directives that Create Scopes In most cases, directives and scopes interact but do not create new instances of scope. However, some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.
Definition and Usage. The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
You can use $index https://docs.angularjs.org/api/ng/directive/ngRepeat
<li ng-repeat="country in countries" data-show="????"> {{country.name}} has population of {{country.population}} <div id="country-{{$index}}"> <p>Expand/collapse content </div> </li> You may need something like below when you got a nested ng-repeat:
<label id="country-{{$parent.$index}}-{{$index}}" ng-repeat="city in country.cites"> {{city.name}} </label>
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
