Question

我正在做的是点击API并获取一个字符数组。每个角色的库存中都有一组项目。当我第一次收到信息时，它只给我项目的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>

正如你所看到的，我在获取项目列表的数组时调用了item函数： ng-repeat =“equip in character.equipment”ng-init =“getEquipmentDetails（equip.id）”< / em>的

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

我确定我做错了这个部分，但我之前没有经历过这个，所以我不确定如何解决这个问题。我需要最终得到每个角色获得各自的项目列表，以及相应的项目名称和统计数据。

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

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

实际上它应该如何运作。

最好的方法是将刚装备传递给你的功能，然后在你的功能中将细节添加到装备中。如下所示：

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数组中的每个设备项，而不是控制器范围内的单个变量。

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

在循环中执行AngularJS函数

1 个答案: