AngularJS - NG-重复分配/生成一个新的唯一的ID [英] AngularJS - ng-repeat to assign/generate a new unique ID

问题描述

林用一个简单的 NG-重复来产生的国家名单。在每个列表是一个隐藏的行/ DIV可以展开和折叠。

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.

这是我面临的问题是，之前我介绍角到我的申请，我手动硬codeD元素的ID，例如：

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>

使用新建code NG-重复：

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>

我怎样才能分配动态/增量ID我的 NG-重复？

推荐答案

您可以使用 $指数 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>

这篇关于AngularJS - NG-重复分配/生成一个新的唯一的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！