angularjs delete remove row ng-repeat index

How to delete a row index in AngularJs

Hello everyone, I am going to share the code sample for delete the rows form angular display grids. The example code with live demo as given using ng-repeat directive.

The AngularJs code sample

 var app = angular.module('CounterApp', []);
       app.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.deleteRows = function (index) {
                  $scope.CounterRows.splice(index, 1);
        };
  }]);

The HTML code sample

<div ng-app="CounterApp">
    <div ng-controller="CounterController">
        <div ng-repeat="row in CounterRows">
              {{$index +1}}  {{row.name}} 
              <input type="button" value="delete" ng-click="deleteRows($index)" />
       </div>
    </div>
 </div>

The full live demo example code as given below

<!doctype html>
<html ng-app="CounterApp">
<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.deleteRows = function (index) {
                  $scope.CounterRows.splice(index, 1);
              }
          }]);
    </script>
</head>
<body ng-controller="CounterController">
    <div ng-repeat="row in CounterRows">
        <div>{{$index +1}}  {{row.name}} <input type="button" value="delete" ng-click="deleteRows($index)" /></div>
    </div>
</body>
</html>


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.