Hi,
I have one TextBox, currently my requirement is that based upon input on textbox display no of rows in table
Ex: if I enter 3 then display 3 empty rows on table
Note: Initially I have blank row with empty columns
Could you please help me
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="~/scripts/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope) {
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" ng-model="txtName" />
</body>
</html>
Download FREE API for Word, Excel and PDF in ASP.Net:
Download
dharmendr
on Oct 05, 2020 06:52 AM
on Oct 05, 2020 07:38 AM
3
Himahesh213,
Check this example. Now please take its reference and correct your code.
HTML
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
table {
border: 1px solid #ccc;
}
table th {
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td {
padding: 5px;
border-color: #ccc;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script>
var app = angular.module("MyApp", []);
app.controller("MyController", function ($scope) {
$scope.Customers = [
{ Id: 1, Name: "", Country: "" }
];
$scope.CustomerDetails = $scope.Customers;
$scope.GetRecords = function () {
$scope.CustomerDetails = [];
var count = $scope.txtCount == "" ? $scope.Customers.count : $scope.txtCount;
for (var i = 1; i <= count; i++) {
$scope.CustomerDetails.push({ Id: i, Name: "", Country: "" });
}
};
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<input type="text" ng-model="txtCount" ng-change="GetRecords()" />
<hr />
<table cellpadding="0" cellspacing="0">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tbody ng-repeat="m in CustomerDetails">
<tr>
<td>{{m.Id}}</td>
<td>{{m.Name}}</td>
<td>{{m.Country}}</td>
</tr>
</tbody>
</table>
</body>
</html>
Demo
