Javascript 根据下拉列表中选择的行数以角度创建动态表_Javascript_Angularjs

Javascript 根据下拉列表中选择的行数以角度创建动态表

javascript angularjs

Javascript 根据下拉列表中选择的行数以角度创建动态表,javascript,angularjs,Javascript,Angularjs,我试图学习AngularJS 1.6，并试图根据下拉列表中选择的行数，用行填充表格。可能在1到12之间。到目前为止，我有以下代码 <body ng-controller="myController"> <div> <p>Blue Corner Boxer: </p> <input type="text" ng-model="nameBlue"> <br> <p&

我试图学习AngularJS 1.6，并试图根据下拉列表中选择的行数，用行填充表格。可能在1到12之间。到目前为止，我有以下代码

 <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>

到目前为止，表将在选择任何1到9时添加1行，但10到12会添加2行。所以我想我想知道如何创建一个大小为“selectedrounds”的数组长度，它将使用中继器重复行

如果您只需要一个用于迭代的数组，而不必担心数组中的数据，请多谢。您可以这样做：

在控制器中：

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

我们只需创建一个具有所需长度且所有元素都是“未定义”的数组。如果您创建一个长度为3的数组，您将得到：[“未定义”、“未定义”、“未定义”]

鉴于：

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

您需要此track by$index，因为您的数组只包含“未定义”的值，因此为了防止关于重复键的争论，我们需要使用track by。

因此，如果我确实需要担心以后行中的数据，我是否最好不要使用ng repeat并以另一种方式填充表？我需要对表末尾的第1行到第x行进行计算。填充表的唯一方法是通过JavaScript或jQuery操作DOM。我看不出有任何理由不使用ng repeat。如果您需要担心数据，可以创建所需长度的数组并将数据填充到其中。您可以使用普通for循环或使用lodash库的_range函数。再看看这个讨论，也许对你有帮助。

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