我正在做Angular JS任务,我需要从文本框中获取输入并形成具有两个输入字段的行。考虑行和列 在其中输入值时,形成两个输入字段。具有行和列的表应形成。 这是一个小提琴链接
https://jsfiddle.net/iamsaisanthosh/r1zync3g/
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.table = [];
$scope.cols = [];
$scope.rows = [];
$scope.arr = [];
$scope.arh = [];
$scope.trr = [];
$scope.makeArray = function() {
$scope.trr.length = 0;
for (var k = 0; k < parseInt($scope.table); k++) {
$scope.trr.push(k);
}
$scope.arr.length = 0;
for (var i = 0; i < parseInt($scope.rows); i++) {
$scope.arr.push(i);
}
$scope.arh.length = 0;
for (var j = 0; j < parseInt($scope.cols); j++) {
$scope.arh.push(j);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<input ng-model="table" type="text" ng-change="makeArray()" />
<table>
<tr ng-repeat="o in trr">
<td> <input ng-model="rows[$index]" type="text" ng-change="makeArray()" />
</td>
<td> <input ng-model="cols[$index]" type="text" ng-change="makeArray()" /></td>
</tr>
</table>
<div>
<table>
<tr ng-repeat="o in arr">
<td ng-repeat="o in arh">Col</td>
</tr>
</table>
</div>
</div>
</div>
我可以从文本框中输入内容并形成行。 在形成的输入字段中输入值后,将形成一个带有输入值的表。 表形式仅适用于第一行输入的值 问题是我不能做到超过一行
无法为第二行输入值的表格 在上面的小提琴中 在文本字段中输入2 2行将形成两个输入字段 在第一行输入字段中分别输入3和4 您可以看到一个由3行4列组成的表格 当我在第二行中输入值时,我需要做同样的事情 第二张表应该形成
答案 0 :(得分:0)
//This piece is wrong right, $scope.rows, $scope.cols are not Strings/Numbers they are arrays and suppose to contain each tabs rows and columns index wise.
$scope.arr.length = 0;
for (var i = 0; i < parseInt($scope.rows); i++) {
$scope.arr.push(i);
}
$scope.arh.length = 0;
for (var j = 0; j < parseInt($scope.cols); j++) {
$scope.arh.push(j);
}
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.table = 0;
$scope.cols = [];
$scope.rows = [];
$scope.makeArray = function() {
if ($scope.table) {
return new Array(parseInt($scope.table));
} else {
return new Array(0);
}
}
$scope.getRowsCount = function ($index) {
if ($scope.rows[$index]) {
return new Array(parseInt($scope.rows[$index]));
} else {
return new Array(0);
}
}
$scope.getColsCount = function ($index) {
if ($scope.cols[$index]) {
return new Array(parseInt($scope.cols[$index]));
} else {
return new Array(0);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<input ng-model="table" type="text" />
<table>
<tr ng-repeat="t in makeArray() track by $index">
<td> <input ng-model="rows[$index]" type="text" />
</td>
<td> <input ng-model="cols[$index]" type="text" /></td>
</tr>
</table>
<div>
<table ng-repeat="t in makeArray() track by $index">
<tr ng-repeat="r in getRowsCount($index) track by $index">
<td ng-repeat="c in getColsCount($parent.$index) track by $index">Col</td>
</tr>
</table>
</div>
</div>
</div>