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 =＆＃34; width：{{encounters.attack_count}}％＆＃34;＆gt; {{encounter_attack_count}}％）。我认为你必须在每个遭遇对象中设置attack_count变量。

在＆＃34; the_encounter＆＃34; function，设置每个遭遇对象的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角度内的单个项目的值

1 个答案: