add rows in angularjs

add rows in angularjs

Hello everyone, I am going to share the code sample for add the rows in display UX array collection using the angular. The code with live demo as given below.

The AngularJs code sample

   angular.module('CounterApp', [])
          .controller('CounterController', ['$scope', function ($scope) {
             
           $scope.CounterRows = [
                { name: 'Row1', web: 'www.code-sample.com' },
                { name: 'Row2', web: 'www.code-sample.net' },
                { name: 'Row3', web: 'www.code-sample.in' },
                { name: 'Row4', web: 'www.code-sample.co.in' },
                { name: 'Row5', web: 'www.code-sample.org' }];

           $scope.AddRows = function () {
                  $scope.CounterRows.push({ name: 'Row7', web: 'www.code-sample.org' });
           }
       }]);

The HTML code sample

<body ng-app="CounterApp">
    <div ng-controller="CounterController">
        <input type="button" value="Add new rows!!" ng-click="AddRows()" />
    </div>
    <div ng-repeat="row in CounterRows">
        <div>{{$index +1}}  {{row.name}}</div>
    </div>
</body>

The full live demo example code as given below

<!doctype html>
<html >
<head>
    <title>Example - www.code-sample.com</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
    <script>
        angular.module('CounterApp', [])
          .controller('CounterController', ['$scope', function ($scope) {
              $scope.CounterRows = [
                { name: 'Row1', web: 'www.code-sample.com' },
                { name: 'Row2', web: 'www.code-sample.net' },
                { name: 'Row3', web: 'www.code-sample.in' },
                { name: 'Row4', web: 'www.code-sample.co.in' },
                { name: 'Row5', web: 'www.code-sample.org' }];

              $scope.AddRows = function () {
                  $scope.CounterRows.push({ name: 'Row7', web: 'www.code-sample.org' });
              }
          }]);
    </script>
</head>
<body ng-app="CounterApp">
    <div ng-controller="CounterController">
        <input type="button" value="Add new rows!!" ng-click="AddRows()" />
    </div>
    <div ng-repeat="row in CounterRows">
        <div>{{$index +1}}  {{row.name}}</div>
    </div>
</body>
</html>


ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book