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;
            };
}]);