Question

我正在尝试根据下拉列表的选择创建一个表。用户将选择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 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);
 }
});

无论我在下拉列表中选择的是什么号码，我每次选择时都会在表格中添加1行。一旦用户选择6，我就想要6行。

Answer 1

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

这不符合你的想法。您将其称为getRoundsArray(6)，它会创建一个包含一个条目的数组，该条目为6，而 不是< / em> ，如你所愿，一个包含六个条目的数组。

例如，请参阅https://www.w3schools.com/js/js_arrays.asp。

因此，你的

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

对该数组的每个一个条目重复，给出您描述的结果。

（并且您不需要track by）

Answer 2

您需要稍微重新设计代码。重复需要超过范围变量（在我的示例中为tableArray），每当下拉列表更改时都会更改。您还需要轨道中的$index才能使其正常工作。

这是一个有效的plunker。

你的功能

return new Array(rounds);

已更改为

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

ng-repeat仅在尝试填充表时重复一次

2 个答案: