javascript - 更改 ng-repeat Angular 内单个项目的值

Question

我是 Angularjs 的新手……我想在这里寻找更多的理论帮助，然后是确切的代码。我正在制作游戏，当您进入新游戏 map 时，它会加载游戏 map 数据和“敌人”，这些对象是包含敌人所有属性的对象。敌人具有相同的属性但不同的值 -

进入一个屏幕——这段代码本质上是初始化新 map ——

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);
    });
  }
});

它加载 map 并执行随机数(模拟掷骰子)，如果通过，它将“遭遇”的敌人加载到此 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>

加载正常...每个“敌人”都有不同的图像，每个都有一个设置为 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); 
  });
}

攻击函数(最终，我会让它为每个“敌人”随机选择一种“攻击”类型，使该代码运行，然后从 0 处的进度计数器重新开始。

我再次创建一个随机数，以引起随机时间延迟，在进度条返回 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。