angularjs table

by kapilgopinath

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="tableApp" ng-controller="tableCtrl">
    <table class="table">
        <thead>
            <tr>
                <th class="col-md-1">Id</th><th class="col-md-2">Name</th><th class="col-md-3">DOB</th><th class="col-md-3">Email</th><th class="col-md-3">Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="people in tableData">
                <td>
                    <div ng-show="editData[people.id]">
                        <input ng-model="people.id"/>
                    </div>
                    <div ng-hide="editData[people.id]">
                        {{people.id}}
                    </div> 
                </td>
                <td>
                    <div ng-show="editData[people.id]">
                        <input ng-model="people.name"/>
                    </div>
                    <div ng-hide="editData[people.id]">
                        {{people.name}}
                    </div>
                </td>    
                <td>
                    <div ng-show="editData[people.id]">
                        <input ng-model="people.dob"/>
                    </div>
                    <div ng-hide="editData[people.id]">
                        {{people.dob}}
                    </div>
                </td>
                <td>
                    <div ng-show="editData[people.id]">
                        <input ng-model="people.emailId"/>
                    </div>
                    <div ng-hide="editData[people.id]">
                        {{people.emailId}}
                    </div>
                </td>
                <td>
                    <div ng-show="editData[people.id]">
                        <input ng-model="people.phone"/>
                    </div>
                    <div ng-hide="editData[people.id]">
                        {{people.phone}}
                    </div>
               ...

JavaScript

var tableApp = angular.module('tableApp',[]);
tableApp.controller('tableCtrl',['$scope',function($scope){
   
    $scope.tableData = [{'name':'rohit', 'dob':'15-august-1985', 'emailId':'[email protected]', 'phone':'9999999999', 'address':'Delhi Rohini', 'id':'0' },
        {'name':'aman', 'dob':'26-july-1975', 'emailId':'[email protected]', 'phone':'9874563210', 'address':'Haryana Sonepat', 'id':'1' },
        {'name':'devraj', 'dob':'27-march-1980', 'emailId':'[email protected]', 'phone':'7410258963', 'address':'Punjab AmritSar', 'id':'2' }];
    $scope.editData = [];
    
    for (var i=0; i<$scope.tableData.length; i++){
        $scope.editData[$scope.tableData[i].id] = false;
    }
    
    $scope.modify = function(tblData){
        $scope.editData[tblData.id] = true;
    }
    $scope.update = function(tblData){
        $scope.editData[tblData.id] = false;
    }
    
}]);