How to enable only parent table raw items as editable? - angularjs

Question

When click on edit button (ng-click="editmode = !editmode") the entire table input showing. is there any solution to show that only show its <input type="text"> as editable ?
var app = angular.module('myapp', []);
app.controller('testController', function($scope) {
$scope.userdetails = {
"id": "1",
"user_id": "2",
"name": "Alycia",
"address": "510 Marks Parkway Suite 221\nLake Karelle, SC 01791",
"post": "Howellmouth",
"district": "Schaeferside",
"state": "New Mexico",
"pin": "61354-9529",
"phone": "[phone]x858",
"mobile1": "[phone]",
"mobile2": "[phone]",
"file_id": "1",
"email1": "Diana11#Sipes.info",
"email2": "Dietrich.Georgianna#hotmail.com",
"created_at": "2015-08-04 11:41:56",
"updated_at": "2015-08-04 11:41:56"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="myapp" ng-controller="testController" class="container">
<table class="table table-hover table-responsive">
<tbody>
<tr>
<th>Name</th>
<td ng-if="!editmode">{{userdetails.name}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.name">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Address</th>
<td ng-if="!editmode">{{userdetails.address}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.address">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Post</th>
<td ng-if="!editmode">{{userdetails.post}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.post">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>District</th>
<td ng-if="!editmode">{{userdetails.district}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.district">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>State</th>
<td ng-if="!editmode">{{userdetails.state}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.state">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Pin</th>
<td ng-if="!editmode">{{userdetails.pin}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.pin">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Phone</th>
<td ng-if="!editmode">{{userdetails.phone}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.phone">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Mobile 1</th>
<td ng-if="!editmode">{{userdetails.mobile1}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.mobile1">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Mobile 2</th>
<td ng-if="!editmode">{{userdetails.mobile2}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.mobile2">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

You should just give a different name on each part instead of "editmode" on every input :
<tr>
<th>Name</th>
<td ng-if="!editName">{{userdetails.name}}</td>
<td ng-if="editName">
<input type="text" ng-model="userdetails.name">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editName = !editName"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Address</th>
<td ng-if="!editAdress">{{userdetails.address}}</td>
<td ng-if="editAdress">
<input type="text" ng-model="userdetails.address">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editAdress = !editAdress"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
Hope it helped.
EDIT :
Here is an other proposition working in this plunker
If you manage a bit your $scope data you can have a lot less HTML to produce
The data would look like this :
$scope.userdetails = {
"id": {
value : "1",
label: "ID"
},
"user_id": {
value : "2",
label: "User Id"
},
"name": {
value : "Alycia",
label: "Name",
display: true
},
"address": {
value : "510 Marks Parkway Suite 221\nLake Karelle, SC 01791",
label: "Address",
display: true
},
"post": {
value : "Howellmouth",
label: "Post",
display: true
}
};
And the HTML Like this :
<table class="table table-hover table-responsive">
<tbody>
<tr ng-if="property.display" ng-repeat="property in userdetails">
<th>{{property.label}}</th>
<td ng-if="!property.editmode">{{property.value}}</td>
<td ng-if="property.editmode">
<input type="text" ng-model="property.value">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="property.editmode = !property.editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
</table>