Currently, I am in the process of developing a game and utilizing NG repeat to dynamically insert divs based on the number of letters and words present. For instance, if the answer to a question in the game is "Clean Sheet," I would like NG-Repeat to generate the appropriate columns so that it displays __ __ __ __ __ space __ __ __ __ __ for the user to input their response. The code snippet I have written so far looks like this:
try{
//assuming $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 stage, the $scope.mainWordHolder contains:
[ [ 0, 1, 2, 3, 4 ], [ 0, 1, 2, 3, 4 ] ]
This output aligns with my desired outcome as it outlines the necessary spaces for each word. How can I implement ng-repeat to display these as divs, allowing me to create a keyboard interface where the user can input keys similar to other popular games?
I attempted the following:
<div class="row">
<div ng-repeat="content in answerArr" class="col">
<div ng-repeat="contentt in mainWordHolder" class="col">
</div>
</div>
</div>
However, I encountered issues as nothing appeared on the screen. Any assistance on this matter would be greatly appreciated.