How to modify and update data table row in angular js?

Question

I m learning of angular js and i have found i issue .

I m creating a new projects .

i have some button edit , add, remove,

if i click to my edit button than show all field but i want to show only current field than i click to update update this filed .

My code is here

Anguar

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

app.controller('modifyCtrl', ['$scope', function($scope){
    $scope.tabelsData= [
        {'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.modify = function(tableData){

        $scope.modifyField = true;
        $scope.viewField = true;
    };


    $scope.update = function(tableData){
        $scope.modifyField = false;
        $scope.viewField = false;
    };

}]);

HTML Code is

<div ng-app="addApp">

<div class="wraper" ng-controller="modifyCtrl">

            <table>
                <thead>
                    <tr>
                        <th>Name:</th>
                        <th>Date Of Birth</th>
                        <th>Email Id</th>
                        <th>Phone No.</th>
                        <th>Address</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="tableData in tabelsData"><form>
                        <td>
                            <div ng-hide="viewField">{{tableData.name | uppercase}}</div>
                            <div ng-show="modifyField"><input type="text" ng-model="tableData.name" /></div>
                        </td>
                        <td>
                            <div ng-hide="viewField">{{tableData.dob}}</div>
                            <div ng-show="modifyField"><input type="text" ng-model="tableData.dob" /></div>
                        </td>
                        <td>
                            <div ng-hide="viewField">{{tableData.emailId}}</div>
                            <div ng-show="modifyField"><input type="text" ng-model="tableData.emailId" /></div>
                        </td>
                        <td>
                            <div ng-hide="viewField">{{tableData.phone}}</div>
                            <div ng-show="modifyField"><input type="text" ng-model="tableData.phone" /></div>
                        </td>
                        <td>
                            <div ng-hide="viewField">{{tableData.address}}</div>
                            <div ng-show="modifyField">
                                <textarea ng-model="tableData.address"></textarea>
                            </div>
                        </td>
                        <td>
                            <button ng-hide="viewField" ng-click="modify(tableData)">Modify</button>
                            <button ng-show="modifyField" ng-click="update(tableData)">Update</button>
                            <button ng-hide="viewField">Add</button>
                            <button ng-hide="viewField">Remove</button>
                        </td></form>
                    </tr>
                </tbody>
            </table>

        </div>

</div>

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

		app.controller('modifyCtrl', ['$scope', function($scope){
			$scope.tabelsData= [
				{'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.modify = function(tableData){

				$scope.modifyField = true;
				$scope.viewField = true;
			};


			$scope.update = function(tableData){
				$scope.modifyField = false;
				$scope.viewField = false;
			};

		}]);
		

table td, table th{
    
    border:solid 1px red;
    padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="addApp">

<div class="wraper" ng-controller="modifyCtrl">

			<table>
				<thead>
					<tr>
						<th>Name:</th>
						<th>Date Of Birth</th>
						<th>Email Id</th>
						<th>Phone No.</th>
						<th>Address</th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="tableData in tabelsData"><form>
						<td>
							<div ng-hide="viewField">{{tableData.name | uppercase}}</div>
							<div ng-show="modifyField"><input type="text" ng-model="tableData.name" /></div>
						</td>
						<td>
							<div ng-hide="viewField">{{tableData.dob}}</div>
							<div ng-show="modifyField"><input type="text" ng-model="tableData.dob" /></div>
						</td>
						<td>
							<div ng-hide="viewField">{{tableData.emailId}}</div>
							<div ng-show="modifyField"><input type="text" ng-model="tableData.emailId" /></div>
						</td>
						<td>
							<div ng-hide="viewField">{{tableData.phone}}</div>
							<div ng-show="modifyField"><input type="text" ng-model="tableData.phone" /></div>
						</td>
						<td>
							<div ng-hide="viewField">{{tableData.address}}</div>
							<div ng-show="modifyField">
								<textarea ng-model="tableData.address"></textarea>
							</div>
						</td>
						<td>
							<button ng-hide="viewField" ng-click="modify(tableData)">Modify</button>
							<button ng-show="modifyField" ng-click="update(tableData)">Update</button>
							<button ng-hide="viewField">Add</button>
							<button ng-hide="viewField">Remove</button>
						</td></form>
					</tr>
				</tbody>
			</table>

		</div>

</div>

Answer 1

If you only want one row to show the inputs on clicking its respective modify button you have two options:

1) Attach booleans to each of the JSON indexes of the tabelsData array.

2) Make a mirror array that houses these booleans.

Having two separate booleans in this case is useless, because each one is being treated on a toggle basis:

Here is the core code for doing approach number two since I assume you want your data to remain the same:

JS:

$scope.editingData = {};

for (var i = 0, length = $scope.tabelsData.length; i < length; i++) {
  $scope.editingData[$scope.tabelsData[i].id] = false;
}

$scope.modify = function(tableData){
    $scope.editingData[tableData.id] = true;
};


$scope.update = function(tableData){
    $scope.editingData[tableData.id] = false;
};

---

Html:

<tbody>
    <tr ng-repeat="tableData in tabelsData">
        <td>
            <div ng-hide="editingData[tableData.id]">{{tableData.name | uppercase}}</div>
            <div ng-show="editingData[tableData.id]"><input type="text" ng-model="tableData.name" /></div>
        </td>
        <td>
            <div ng-hide="editingData[tableData.id]">{{tableData.dob}}</div>
            <div ng-show="editingData[tableData.id]"><input type="text" ng-model="tableData.dob" /></div>
        </td>
        <td>
            <div ng-hide="editingData[tableData.id]">{{tableData.emailId}}</div>
            <div ng-show="editingData[tableData.id]"><input type="text" ng-model="tableData.emailId" /></div>
        </td>
        <td>
            <div ng-hide="editingData[tableData.id]">{{tableData.phone}}</div>
            <div ng-show="editingData[tableData.id]"><input type="text" ng-model="tableData.phone" /></div>
        </td>
        <td>
            <div ng-hide="editingData[tableData.id]">{{tableData.address}}</div>
            <div ng-show="editingData[tableData.id]">
                <textarea ng-model="tableData.address"></textarea>
            </div>
        </td>
        <td>
            <button ng-hide="editingData[tableData.id]" ng-click="modify(tableData)">Modify</button>
            <button ng-show="editingData[tableData.id]" ng-click="update(tableData)">Update</button>
            <button ng-hide="viewField">Add</button>
            <button ng-hide="viewField">Remove</button>
        </td>
    </tr>
</tbody>

I made an example: http://plnkr.co/edit/lXq1WB