Using angular ng-repeat for multi-dimentional array

Question

I'm currently working on a game and am trying to use NG repeat to dynamically add divs depending on how many latter and words there are. so for example if the answer to a queston in the game was "Clean Sheet" then i would want NG-Repeat to make the correct amount of columns so that it would say __ __ __ __ __ space __ __ __ __ __ then the user can fill them. Ive currently wrote this :

try{
//in this example presume $stateParams.answer is "clean sheet"

var answerArr = $stateParams.answer.toString().split(' ');
var finalLines = "";
$scope.mainWordHolder = [];

angular.forEach(answerArr, function(value, key) {
     var amt = value.length;

     $scope.amtofLetters=[];
      for (var i=0; i<amt; i++) {
          $scope.amtofLetters.push(i);
      }
      $scope.mainWordHolder.push($scope.amtofLetters);
      $scope.amtofLetters = [];
});

console.log($scope.mainWordHolder);
}catch(e){console.log("error : "+ e);}

at this point my $scope.mainWordHolder is :

[ [ 0, 1, 2, 3, 4 ], [ 0, 1, 2, 3, 4 ] ]

which is exactly what i want so i know how many letters are needed for each word. How can i use ng-repeat to show this as divs so that i can create a keyboard and the user can enter keys like other popular games.

Ive tried this :

<div class="row">
<div ng-repeat="content in answerArr" class="col"> 
       <div ng-repeat="contentt in mainWordHolder" class="col">

      </div>   
</div>
</div>

but i get nothing for some reason. Any help appreciated.

austinbruch · Accepted Answer · 2016-09-21 16:49:03Z

2

It looks like you're trying to reference answerArr in your ng-repeat, but answerArr is not stored on the scope.

When you use ng-repeat="content in answerArr", answerArr needs to be stored on the scope to be accessible in the HTML.

Try storing answerArr on your scope to be able to access it's contents via ng-repeat.

answered Sep 21, 2016 at 16:49

austinbruch

3233 silver badges14 bronze badges

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

3 Comments

Gaz Smith Over a year ago

Thanks i missed that

Gaz Smith Over a year ago

its just listing them now as rows rather than _ _ _ _ _ _ _ _ _ _

austinbruch Over a year ago

Can you update the question with the current state of your code? It's hard to figure out the problem if any changes have been made.

chenchuk · Accepted Answer · 2016-09-21 16:49:58Z

0

You need to iterate over the 'content' which represents the array in the whole array (the outer). Try this :

<div class="row">
<div ng-repeat="content in answerArr" class="col"> 
       <div ng-repeat="contentt in content" class="col">

      </div>   
</div>
</div>

answered Sep 21, 2016 at 16:49

chenchuk

5,8124 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

Using angular ng-repeat for multi-dimentional array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related