Angular variables not updating outside loop

Question

So I'm running into a weird issue with Angular where I created a raw predefined object to loop through card stats for a card game I am working on.

    $scope.attack = 500;
    $scope.defense = 500;

    $scope.cardPowers = [
    {
      name: "balanced",
      attack: 2500,
      defense: 1500,
      cost: 3
    },
    {
      name: "high-offense",
      attack: 2500,
      defense: 1000,
      cost: 5
    },
    {
      name: "base-offense",
      attack: 1800,
      defense: 1000,
      cost: 4
    }
  ];

This is all in the main controller where most of my functionality is going through. I'm looping through them and creating buttons where someone can choose the attributes for the car like so:

<div id="preview" class="vertical-display card twenty-five building" ng-class="{'building': gotComics, 'editing' : editing}" ng-controller="Save">
{{attack}} : {{defense}}
<h3>Card Builder</h3>
<div class="card-functions">
  <ul>
    <li><a href="" ng-click="saveNewCard(cardName, cardDescription, 500, 500, 5, cardThumbnail, cardBackground, '1', cardType)">SAVE <i class="fa fa-floppy-o"></i></a></li>
    <li><a href="" ng-click="editing = true">EDIT <i class="fa fa-pencil-square-o"></i></a></li>
    <li><a href="" ng-click="editing = false" ng-show="editing">CLOSE <i class="fa fa-times"></i></a></li>
  </ul>
  <!-- <a href="" ng-click="saveImage()" class="button small saveImage"><i class="fa fa-file-image-o"></i> Save as Image</a> -->
</div>
<div ng-show="editing" class="options">
  <h4>Choose Power</h4>
  <p ng-repeat="power in cardPowers"><a href="" ng-click="attack=power.attack">{{power.name | uppercase}}       {{attack}}</a></p>

  <h4>Thumbnail Positioning</h4>

  <!-- repeat card positioning -->  
</div>

<div ng-show="gotComics">
  <?php include('flip-container-code.php'); ?>
</div>

Mostly everything works fine, however, when I click on my button to set the new attack, it only updates {{attack}} inside the loop, and not outside. See this screencast to see what I am talking about: http://screencast.com/t/0ZukLLYqtUYM

Not sure why this is happening, did some research and it seems I am doing this all right, so it's odd. Note: Everything else is actually working just fine, my card saving function, seeing the default attack and defense values, the models, etc.

Tom · Accepted Answer · 2015-05-06 14:00:53Z

2

To start, you should move the implementation details outside of the view (i.e., you shouldn't be directly setting model.attack = power.attack in the view, that should be at least one level deeper, in the controller). With that, moving this to the controller will resolve your issue itself.

Your view can look like this:

<p ng-repeat="power in cardPowers">
  <a href="" ng-click="setAttackPower(power)">
    {{power.name | uppercase}} {{attack}}
  </a>
</p>

And in your controller:

$scope.setAttackPower = function(power) {
  $scope.attack = power.attack;
}

answered May 6, 2015 at 14:00

Tom

7,7401 gold badge26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adrian Rodriguez Over a year ago

Thanks Tom. This is actually something I did earlier elsewhere in the code and didn't realize it. This resolved my issue.

eladcon · Accepted Answer · 2015-05-06 13:35:45Z

If I understand your problem right, try to put the attack property inside an object. This is because when you do attack = power.attck inside ng-repeat you are creating a new property on the child scope created by the ng-repeat instead of changing the value of the attack on the parent scope.

In your controller:

$scope.model = {attack: 500};

And your html:

<div id="preview" class="vertical-display card twenty-five building" ng-class="{'building': gotComics, 'editing' : editing}" ng-controller="Save">
{{model.attack}} : {{defense}}
<h3>Card Builder</h3>
<div class="card-functions">
  <ul>
    <li><a href="" ng-click="saveNewCard(cardName, cardDescription, 500, 500, 5, cardThumbnail, cardBackground, '1', cardType)">SAVE <i class="fa fa-floppy-o"></i></a></li>
    <li><a href="" ng-click="editing = true">EDIT <i class="fa fa-pencil-square-o"></i></a></li>
    <li><a href="" ng-click="editing = false" ng-show="editing">CLOSE <i class="fa fa-times"></i></a></li>
  </ul>
  <!-- <a href="" ng-click="saveImage()" class="button small saveImage"><i class="fa fa-file-image-o"></i> Save as Image</a> -->
</div>
<div ng-show="editing" class="options">
  <h4>Choose Power</h4>
  <p ng-repeat="power in cardPowers"><a href="" ng-click="model.attack=power.attack">{{power.name | uppercase}}       {{model.attack}}</a></p>

  <h4>Thumbnail Positioning</h4>

  <!-- repeat card positioning -->  
</div>

<div ng-show="gotComics">
  <?php include('flip-container-code.php'); ?>
</div>

See here for further explanation.

Or even make the ng-click be ng-click="setAttack(power)" and simply set $scope.attack = power.attack in the function.

SillasSoares · Accepted Answer · 2015-05-06 13:49:50Z

0

Try to accest the parent and it should work

Like this on ng-click:

 <p ng-repeat="power in cardPowers"><a href="" ng-click="$parent.attack = power.attack">{{power.name | uppercase}}       {{attack}}</a></p>

answered May 6, 2015 at 13:49

SillasSoares

3821 silver badge7 bronze badges

1 Comment

Adrian Rodriguez Over a year ago

Is this accessing the parent controller? I didn't know something like this was possible. Unless I am misunderstanding.

Collectives™ on Stack Overflow

Angular variables not updating outside loop

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related