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

Last Reply 22 days ago By dharmendr

Posted 22 days ago

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>

 

You are viewing reply posted by: dharmendr 22 days ago.
Posted 22 days ago Modified on 22 days ago

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