CODEWITHSUNDEEP
javascriptangularjs
fubar92
fubar92

Reputation: 85

ng-repeat only repeating once while trying to populate table

I am trying to create a table based on the selection of a drop down list. The user would choose 1 to 12 and that number would be the amount of rows to create in the table. Here is my code so far

 <body ng-controller="myController">
    <div>
        <p>Blue Corner Boxer: </p> <input type="text" ng-model="nameBlue">
        <br>
        <p>Red Corner Boxer: </p> <input type="text" ng-model="nameRed">
        <br>
        <p>Number of Rounds:</p> <select ng-model="selectedRounds"><option ng-repeat="x in rounds">{{x}}</option></select>
    </div>

    <div>
            <table class="table table-striped">
                    <thead>
                        <tr>
                            <th style="text-align:center">{{nameBlue}}</th>
                            <th style="text-align:center">Round</th>
                            <th style="text-align:center">{{nameRed}}</th>
                        </tr>
                    </thead>
                    <tbody class="tablerows">
                        <tr ng-repeat="x in getRoundsArray(selectedRounds) track by $index">
                           <td><select ng-options="x for x in score"></select></td>
                           <td>Score</td>
                           <td><select ng-options="x for x in score"></select></td>
                       </tr>
                    </tbody>
                </table>



var myApp = angular.module("myModule", []);


myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS tutorial";
$scope.score = [1,2,3,4,5,6,7,8,9,10];
$scope.rounds = [1,2,3,4,5,6,7,8,9,10,11,12];
$scope.selectedRounds = 0;


$scope.getRoundsArray = function(rounds){
    return new Array(rounds);
 }
});

No matter what number I choose in the drop down list it just adds 1 row to the table at a time for each selection I make. Instead I want 6 rows as soon as user selects 6.

Upvotes: 0

Views: 101

Answers (2)

DeclanMcD
DeclanMcD

Reputation: 1586

You need to re-architect your code slightly. The repeat needs to be over a scoped variable (tableArray in my example) that changes whenever the dropdown changes. You also do need the $index in the track for it to work.

Here is a working plunker.

Your function 

return new Array(rounds);

has changed to 

$scope.tableArray = new Array( $scope.selectedRounds * 1);

Upvotes: 1

Mawg
Mawg

Reputation: 40215

$scope.getRoundsArray = function(rounds){
    return new Array(rounds);
 }
});

this does not do what you think it does. You are calling it as getRoundsArray(6), which creates an array with one entry, which is 6, and not, as you want, an array with six entries.

See, for example, https://www.w3schools.com/js/js_arrays.asp.

Thus, your

<tr ng-repeat="x in getRoundsArray(selectedRounds) track by $index">

repeats for each of the one entries of that array, giving the result that you describe.

(and you don't need that track by)

Upvotes: 1

Related Questions