使用Angular（ng-repeat）从API加载列表，然后使用jQuery添加一些其他信息

Question

之前我问过这个并没有得到答案。这一次，我会尝试更好地解释。

基本上，我正在从Ergast API加载一个Formula 1构造函数列表。因为API不提供我想要的所有信息，比如构造函数基础年份，所以我必须使用jQuery来添加它们。

HTML标记非常简单。标记动态内容，以及基础年份的空标记。

<div id="constructors" ng-repeat="constructor in constructors">
   <img src="img/flags/{{constructor.nationality}}.png" />
   <h2 id="constructor">{{constructor.name}}</h2>
   <h3 id"foundYear"></h3>
</div>

我知道如果只有一个元素，下面的jQuery会起作用：

$(document).ready(function(){
  if ($('#constructor').is(":contains('McLaren')")) {
    $('#foundYear').append('1963');
  }
});

我真的不知道如何处理这个，因为我还是Javascript的新手。这是一张真正理解我想要做的事情的图片。

Answer 1

你能否使用ng-if在重复内部输入这些信息？

<div id="constructors" ng-repeat="constructor in constructors">
   <img src="img/flags/{{constructor.nationality}}.png" />
   <h2 id="constructor">{{constructor.name}}</h2>
   <h3 ng-if="constructor.name == 'McLaren'" id="foundYear">1963</h3>
</div>

或类似的东西。

您也可以使用该名称作为H3 ID的一部分，然后直接访问该项目

<...id="foundYear-{{constructtor.name}}"....>

的jQuery（＆＃39;＃foundYear-迈凯轮＆＃39）。附加...

如果您有多年的时间来投入各种项目，您应该只是增加控制器中的接收数据以添加年份字段然后使用     

{{constructor.year}}

它将填写一年中的任何一个。

Answer 2

<div id="constructors" ng-repeat="constructor in constructors">
<div class="wrapper">
<img src="img/flags/{{constructor.nationality}}.png" />
<h2 class="constructor-name">{{constructor.name}}</h2>
<h3 class="foundYear"></h3>
</div>
</div>

$(document).ready(function(){
  $('#constructor .wrapper').each(function(){
    if($(this).find(.constructor-name).text() === "McLaren"){
        $(this).find('.foundYear').html('1963')
    }
    });
    });

请注意 - 1.在循环内部不要声明静态ID。 2.不要使用追加，而是使用.html（）