Выполнение функции AngularJS в цикле

Question

Что я делаю, это использовать API и возвращать массив символов. Каждый персонаж имеет набор предметов в своем инвентаре. Когда я впервые получаю информацию, она дает мне только идентификатор элемента. Затем я должен использовать этот идентификатор и сделать другой вызов 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> 

Как вы можете видеть, что я звоню функцию элемента при получении массива из списка элементов: нг-повтора = «оборудуют в character.equipment» нг-INIT = "getEquipmentDetails (equip.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}} 

Это будет изменять каждый элемент оборудования в характере. а не единственной переменной в области вашего контроллера.

Я также предлагаю не использовать ng-init таким образом, это не является целью директивы.