3

I am trying to learn AngularJS 1.6 and I am trying to populate a table with rows depending on the amount of rows selected in a dropdown list. It could be anywhere from 1 to 12. So far I have the following code. 

 <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 selectedRounds">
                           <td>Test</td>
                           <td>Test</td>
                           <td>Test</td>
                       </tr>
                    </tbody>
                </table>

                <h2 style="text-align: center">Final Score: </h2> {{scoreBlue1 + ScoreBlue2}}
    </div>
</body>

Then in the js file

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



//Create the controller and register the module in one line
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];
});

So far the table will add 1 row on selection of anything 1 to 9, but 10 to 12 adds 2 rows. So I think I am wondering how to create an array length of size "selectedrounds" that will repeat rows with the repeater.

Thanks

Saurabh Agrawal
  • 7,581
  • 2
  • 27
  • 51
fubar92
  • 85
  • 1
  • 8

1 Answers1

2

If you need an array only for iterating and you don't worry about data in it. You can do something like this:

In your controller:

$scope.selectedRounds = 0;
$scope.getRoundsArray(){
   return new Array($scope.selectedRounds);
}

We just create an array with needed length and with all elements are 'undefined'. If you create an array with 3 lenght you will get: ['undefined', 'undefined', 'undefined'].

In view:

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

You need this track by $index cause your array contains only 'undefined' values so to prevent angular arguing about duplicate keys we need to use track by.

Iaroslav
  • 295
  • 1
  • 10
  • So if I do need to worry about the data in the rows afterwards, would I be better off not using ng-repeat and populating the table another way? I would need to do math on in rows 1 to x at the end of the table. – fubar92 Feb 01 '18 at 04:34
  • There is only one way to populate the table is by manipulating DOM by JavaScript or jQuery. I don't see any reason why not to use ng-repeat. If you need to worry about data you can create an array of needed length and populate data to it. You can use usual for loop or use _range function of lodash library. https://lodash.com/docs#range – Iaroslav Feb 01 '18 at 04:39
  • Also take a look at this discussion, maybe it help you. https://stackoverflow.com/a/10050831/3710672 – Iaroslav Feb 01 '18 at 04:41