更改 ng-repeat 中单个项目的值 angular

Question

我是 Angularjs 的新手...我想在这里寻找更多的理论帮助，然后是确切的代码。我正在制作一个游戏，当你进入一个新的游戏地图时，它会加载游戏地图数据和 "enemies"，它们是包含敌人所有属性的对象。敌人具有相同的属性但不同的值 -

进入一个屏幕 - 此代码实质上是初始化新地图 -

db.getThisMapHovers($scope.area).success(function(data){
  $scope.maphovers = data;
  $scope.room_url = data[0].room_url;
  var random_num = Math.random();
  random_num = random_num.toString();
  random_num = random_num.substring(3,2);
  var calculated_num = data[0].encounter_chance;
  if(random_num >= calculated_num){
     db.getNpcCombat(data[0].npc_combat_set).success(function(data){
       $scope.encounters = [];
      $scope.encounters = data;
       $scope.encounters.attack_count = 0; 
      $scope.the_encounter(data);
    });
  }
});

它载入地图并随机数（模拟掷骰子）如果通过，它载入 "encounter" 的敌人到这个 HTML -

<div class="col-md-6">
    <div ng-repeat="encounter in encounters" class="col-md-4" ng-class="{'move_forward' : number == 100}">
        <img class="animated tada col-md-12" style="width:100px" src="{{encounter.combat_npc_img}}">
    <p>{{encounters.attack_count}}</p>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="0"
  aria-valuemin="0" aria-valuemax="100" ng-model="attack" style="width: {{encounters.attack_count}}%">
    {{encounters.attack_count}}%
            </div>
        </div>
    </div>
</div>

加载正常...每个 "enemy" 都有不同的图像，每个都有一个设置为 0 的进度条。

然后运行这段代码（这不是我想要的）...我从 0 开始计算每个进度条并计数到 100，一旦达到 100，停止间隔并运行 $scope.attack 函数 -

$scope.the_encounter = function(data){
   angular.forEach(data, function(value, key) {
      var set_timer = $interval(function() {
      $scope.encounters.attack_count += 1;
      if($scope.encounters.attack_count == 100){
         $interval.cancel(set_timer);
         $scope.attack(data);
    }
  }, value.attack_rate); 
  });
}

攻击函数（最终，我打算随机select一种"attack"，每个"enemy"使那个代码运行然后重新开始进度计数器回到 0。

我正在再次创建一个随机数，以引起随机延迟，每个 "enemy" 在进度条返回 0 并重新启动攻击过程之前各不相同。

$scope.attack = function(data){
    angular.forEach(data, function(value, key) {
       var random_num = Math.random();
       random_num = random_num.toString();
       random_num = random_num.substring(2,7);
       $timeout(function(){
         $scope.encounters.attack_count = 0;  
         $scope.the_encounter(data);
  }, random_num);
});
}

我遇到的问题是所有敌人的进度条都完全一样。 ...我认为我有 foreach 循环，它会对每个项目产生不同的影响，但它似乎给出了相同的值。

如果有人可以向我解释如何将不同的计时器添加到 ng-repeat 中的不同项目以及我将如何能够在循环内定位单个项目，那就太好了。

Answer 1

不知道我理解的对不对，我根据你的来源做了一个例子：http://jsfiddle.net/s94g9w24/3/。

基本上，您使用的是一个全局 $scope 变量（$scope.encounters.attack_count）并在 html 中引用该变量（style="width: {{encounters.attack_count}}%"> {{encounters.attack_count}}%）。我认为您必须在每个遇到的对象中设置 attack_count 变量。

在"the_encounter"函数中，设置每个遇到对象的attack_count变量：

$scope.the_encounter = function(data){
   angular.forEach(data, function(value, key) {
      var set_timer = $interval(function() {
      value.attack_count += 1; //set the attack_count in the 'value' object, not in the $scope
      if(value.attack_count == 100){
         $interval.cancel(set_timer);
    }
  }, value.attack_rate); 
});

在 html 标记中，您引用了 encounter.attack_count 变量：

    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" ng-model="attack" style="width: {{encounter.attack_count}}%">
    {{encounter.attack_count}}%
    </div>

请注意，您引用的变量是 encounterS.attack_count，我更改为 encounter.attack_count。

更改 ng-repeat 中单个项目的值 angular

Changing values for individual items inside an ng-repeat angular

javascript

loops

angularjs

ng-repeat