gpt4 book ai didi

javascript - 根据在下拉列表中选择的行数在 Angular 中创建一个动态表

转载 作者:行者123 更新时间:2023-11-29 11:00:12 24 4
gpt4 key购买 nike

我正在尝试学习 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>

然后在js文件中

//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];
});

到目前为止,表格将在选择 1 到 9 的任何内容时添加 1 行,但是 10 到 12 会添加 2 行。所以我想我想知道如何创建一个长度为“selectedrounds”的数组,它将用转发器重复行。

谢谢

最佳答案

如果您只需要一个数组来进行迭代并且您不必担心其中的数据。你可以这样做:

在你的 Controller 中:

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

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

在 View 中:

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

你需要这个 track by $index 因为你的数组只包含“未定义”值,所以为了防止我们需要使用 track by 的重复键的 Angular 争论。

关于javascript - 根据在下拉列表中选择的行数在 Angular 中创建一个动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48555258/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com