javascript - 在循环中执行 AngularJS 函数

Question

我正在做的是点击一个 API 并取回一个字符数组。每个 Angular 色的库存中都有一组元素。当我第一次获得信息时，它只给了我元素的 ID。然后我必须使用该 ID 并进行另一个 API 调用以获取与该项目相关的信息，以便我可以正确地从中获取名称和统计信息。

<div class="gwapi_content row" ng-repeat="character in characters" ng-if="character.profession == 'Warrior'">

  <div class="character-header">
    <h3>{{character.name | uppercase}} <img src="img/{{character.profession}}_icon.png" alt=""></h3>
    <h5 class="subheader">{{character.race}} {{character.profession}}</h5>
  </div>

  <div class="column photo" style="background-image: url('../img/{{character.name}}.jpg')">
    <img src="img/{{character.profession}}_icon.png" alt="">
  </div>

  <div class="column info">
    <div class="panel-content">
      <ul>
        <li>NAME: {{character.name}}</li>
        <li>CLASS: {{character.profession}}</li>
        <li>
          LEVEL: {{character.level}}
        </li>
        <li>
          Race: {{character.race}}
        </li>
        <li>
          Gender: {{character.gender}}
        </li>
        <li>Birthday: {{character.created | date: 'MMMM dd, yyyy'}}</li>
        <li>Deaths: {{character.deaths}}</li>
      </ul>
    </div>
  </div>

  <div class="column equipment">
    <div class="panel-content">
      <ul class="">
        <li>
          <ul class="li equipment-list">
            <li ng-repeat="equip in character.equipment" ng-init="getEquipmentDetails(equip.id)">
              <span>
                {{equip.id}} {{details.name}}
              </span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <div class="clear"></div>
</div>

如您所见，我在获取项目列表数组时调用了项目函数:ng-repeat="equip in character.equipment"ng-init="getEquipmentDetails(equip.id)"

这是我的问题所在。每当我使用 ID 进行此 API 调用时，所有名称都会被替换为它加载的最后一个名称。如下图所示。

我确定我在这部分做错了，但我以前没有经历过，所以我不确定如何处理这个问题。我需要让每个 Angular 色得到他们自己的项目列表，以及项目各自的名称和统计数据。

这是javascript:

$scope.getAccount = function(){

$http.get('https://api.guildwars2.com/v2/characters?access_token='+access_token+'&page=0')
.success(function(response, status, headers, config){
  // console.log(response);
  $scope.characters = response;
})
.error(function(data, status, headers, config) {
  console.log("Error retreiving data");
  // console.log(data + '\n' + status + '\n' + headers +'\n' + config);
});
};

$scope.getAccount();

$scope.getEquipmentDetails = function(id){


$http.get('https://api.guildwars2.com/v1/item_details.json?item_id=' + i)
.success(function(response, status, headers, config){

  $scope.details = response;

})
.error(function(response, status, headers, config){

  console.log('No info');

});

};

Answer 1

问题的根源在于您为设备详细信息设置了单个变量，因此单个变量的内容被绑定(bind)到模板。您可能正在获取所有不同的详细数据，但最后完成的将始终是显示的数据，因为它将设置 $scope.details 的值并刷新模板，所有使用 {{details.name}} 的都将得到新的值(value)。

这实际上是它应该如何工作的。

更好的方法是仅将装备传递给您的函数，然后将详细信息添加到函数中的装备。所以像这样:

ng-init="getEquipmentDetails(equip)"

然后将您的函数更改为:

$scope.getEquipmentDetails = function(equipment){

$http.get('https://api.guildwars2.com/v1/item_details.json?item_id=' + equipment.id)
.success(function(response, status, headers, config){
  equipment.details = response;
})
.error(function(response, status, headers, config){
  console.log('No info');
    });
}

然后更改您的模板以使用:

{{equip.details.name}}

这将修改 character.equipment 数组中的每个设备项目，而不是 Controller 范围内的单个变量。

我还建议不要以这种方式使用 ng-init，这并不是该指令的真正意图。