Tuesday, September 06, 2016

AngularJS simple add, delete HTML example

If you are just getting starting with AngularJS, then you may find a humongous amount of tutorial and articles on the internet which can help you get confused and lost pretty quickly.

If you know HTML and JavaScript/Jquery and just quickly want to see how AngularJS would change your regular HTML vs JavaScript interaction, then perhaps this quick article may help you. In this demo, I will not be using any server side stuff. No ASP.NET, no PHP. It will be a plain old HTML page, and a small bit of JavaScript.

As of writing, it is based on AngularJS 1.5.8.

In this demo, I will provide user the ability to provide his first name, last name and gender. This information will get added to a table and will be dynamically updated when new row is added. The user will also be able to select one or more rows, and delete them.

All this will happen on the client side, with no postback happening. Additionally, to keep things simple I am not adding ayn session management or database part so nothing will persist if you re-open the page.



JSFiddle: https://jsfiddle.net/saurabhkum/ftod4zqh/


Raw code below:

HTML

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


    
    
</head>
<body data-ng-app="angulardemo" data-ng-controller="appCtrl" class="container">

<table id="table" class="table table-responsive">
<thead>
<tr>
    <th> </th>
    <th>#</th>
    <th>First:</th>
    <th>Last:</th>
    <th>Gender</th>
</tr>
</thead>
<tbody>
    <tr class="records" data-ng-repeat="record in records | orderBy:'-rating'">
        <td><input type="checkbox" data-ng-model="record.selected"/></td>
        <td>{{$index + 1}}</td>
        <td>{{ record.fname }}</td>
        <td>{{ record.lname }}</td>
        <td>{{ record.gender }} </td>
    </tr>
    <tr>
        <td><input data-ng-hide="!records.length"  type="button" data-ng-click="remove()" class="btn pull-left" value="X"></td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    </tbody>
</table>

<hr/>
<form >
<div class="row"><p>
Enter the details below to add new row:
</p></div>
<div class="row">
      <div class="col-md-3"><strong>First Name  </strong><input type="text"  data-ng-model="record.fname" /></div>
      <div class="col-md-3"><strong>Last Name  </strong><input type="text" data-ng-model="record.lname" /></div>
      <div class="col-md-3 form-group">
            <label><input type="radio" name="gender" value="male" checked data-ng-model="record.gender">Male</label>
            <label><input type="radio" name="gender" value="female" data-ng-model="record.gender">Female</label>
      </div>
      <div class="col-md-3"> <input type="button" data-ng-click="addNew()" class="btn btn-primary addnew pull-right" value="Add New"> </div>
</div>
</form>
<hr/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>                      
</body>
</html>


JavaScript


var app = angular.module('angulardemo', []);
app.controller('appCtrl', ['$scope', function($scope) {
    $scope.record = {}; 
    $scope.records=[];
    $scope.addNew = function(){
        $scope.records.push({ 
            'sr': $scope.records.length, 
            'fname':$scope.record.fname,
            'lname': $scope.record.lname, 
            'gender': $scope.record.gender
        });     
    };
    
     $scope.remove = function(){
                var newDataList=[];
                $scope.selectedAll = false;
                angular.forEach($scope.records, function(selected){
                    if(!selected.selected){
                        newDataList.push(selected);
                    }
                }); 
                $scope.records = newDataList;
            };
}]);

8 comments:

Mohana M said...

Hi, the information you provided here is very informative and useful for me. If anyone interested to learn AngularJS Training reach GangBoard. MSBI Training | Hadoop Training

vignesjose said...
This comment has been removed by the author.
Jones Sathya said...

A simple AngularJS application to add / delete / list / sort data comprising of three fields (state code, price and tax). It was written to demonstrate to a friend, the simplicity and power of Angular to address programming challenges - in recruitment processes - quickly and effectively.
AngularJS Training in Chennai | AngularJS Training Institute in Chennai

Geetha Devi said...


Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ..Best Angularjs Training in Chennai|Angularjs Training in Chennai

jahan bdreamz said...

Hi, the information you provided here is very informative and useful for me. If anyone interested to learn

Angularjs Online Training

vignesjoseph said...

This site content post was very great I'll read this site all content have useful to my career. Marvelous post and it's this quality of relatively content.
Hadoop Training in Chennai | Hadoop Training Institute in Chennai

jahan bdreamz said...

Hi admin you provide a very good information. Iam really happy to read this blog.It will help lot of freshers to update their knowledge.Thanks for sharing.keep sharing more blogs.


Angularjs Online Training

satinder singh said...

I have also written similar article Delete Row in AngularJS, but I have done with slight another way i.e by adding $index in delete function ng-click Angularjs: Delete selected Table Row tr on button click
Hope you like reading it