Table row data add and delete using angularjs

         

Using angularjs will added list of item from the view into table. Angularjs using user name and department details added into table and unwanted or wrongly entered data was delete functionality implemented.

HTML Code
<div ng-app="appTable">
    <div ng-controller="appController">
        <input type="text" ng-model="user.name"/><br/>
        <input type="text" ng-model="user.dept"/><br/>
        <button ng-click="add()"> Add </button>
       
        <table>
            <th>
                <td>S.No</td>
                <td>Name</td>
                <td>Dept</td>
                <td>Delete</td>
            </th>
            <tr ng-repeat="employee in employeeList">
                <td>{{$index}}</td>  
                <td>{{employee.name}}</td>  
                <td>{{employee.dept}}</td>
                <td><input type="button" value="D" ng-click="remove($index)" /></td>
            </tr>
        </table>
    </div>  
</div>

Angular js

var app = angular.module("appTable",[]);
app.controller("appController",function($scope) {
    $scope.user = {};
    $scope.user.name = "";
    $scope.user.dept = "";
    $scope.employeeList = [];
    $scope.add = function(){
        var data = {};
       data.name = $scope.user.name ;
       data.dept = $scope.user.dept;
       $scope.employeeList.push(data);
        console.log($scope.employeeList);
    }
 
    $scope.remove = function(obj){
       // console.log('data from remove'+obj);
        //console.log('before'+$scope.employeeList);
       // $scope.employeeList.splice(obj, obj);
        console.log('end'+$scope.employeeList);
     
        if(obj != -1) {
   $scope.employeeList.splice(obj, 1);
}
    }
});

Result:
Demo