更改 ng-repeat 角度内单个项目的值

Question

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

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

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

它加载地图并执行一个随机数（模拟掷骰子），如果通过，它会将敌人加载到此 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 变量。

在“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 标记中，您引用了 meet.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>

注意你引用的变量是遇到S.attack_count，我改成了遇到.attack_count。