Add (Insert) empty rows to Table based on TextBox value in AngularJS

mahesh213
 
on Oct 05, 2020 12:48 AM
Sample_151493.zip
1714 Views
Answered

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
Answer

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

Disclaimer
This site is started with intent to serve the ASP.Net Community by providing forums (question-answer) site where people can help each other. The content posted here is free for public and is the content of its poster. The site does not provide any warranties for the posted content. If you feel any content is violating any terms please contact.
© 2021 www.aspsnippets.com All rights reserved | Privacy Policy | Powered by Excelasoft Solutions Excelasoft Solutions