Sunday, 5 June 2016

Create a example to display the collection and total no of records along with delete operation in Angular Js

In this post we are going to see How to display the collection in Html and the Total number of records using angular js, additionally we will have the delete operation so whenever a delete happens the records should be updated the count in the UI.

HTML :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


<div ng-controller="HomeController">
</head>
<body ng-app="app">

<script src="angular.js"  type="application/javascript"></script>
<script src="app.js" type="application/javascript"></script>


    <ul style="list-style: none;">
        <li style="padding: 10px;background-color: lightgray;margin: 5px;width: 300px;
                      text-align: center"
            ng-repeat="item in DataItems">
            <span>{{item}}</span>
            <span style="position: relative;right: -140px;">
                <input type="button" ng-click="remove(item)" value="X"> </span>
        </li>
        <div>Total Records : {{DataItems.length}}</div>
    </ul>
</div>


</body>
</html>

App.Js
var app = angular.module('app',[]);

app.controller('HomeController', ['$scope',function ($scope) {


        $scope.DataItems = [1,2,3,4,5,6,7];

        $scope.remove = function (id) {
            $scope.DataItems.splice($scope.DataItems.indexOf(id),1);
        }

    }]);


you can see the below output , that the initial collection is display as List along with the total records count, when the user delete the data, then automatically the count is updated correctly

Output







From this post you can learn how to do the iteration in collection and display in the UI along with delete operation

No comments:

Post a Comment