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>