AngularJS – ng重复分配/生成新的唯一ID

发布时间：2020-12-17 08:14:46 所属栏目：安全来源：网络整理

导读：我使用简单的ng重复来生成国家列表。每个列表中都有一个隐藏的行/ div，可以展开和折叠。我面临的问题是，在我将Angular引入我的应用程序之前，我手动硬编码元素的ID，例如： li data-show="#country1" {{country.name}} has population of {{country.popul

我使用简单的ng重复来生成国家列表。每个列表中都有一个隐藏的行/ div，可以展开和折叠。

我面临的问题是，在我将Angular引入我的应用程序之前，我手动硬编码元素的ID，例如：

<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>

使用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>

我如何在我的ng重复中分配动态/增量ID？

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!