How to enable only parent table raw items as editable?

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": "(239)009-2861x858",
    "mobile1": "+70(1)8058651903",
    "mobile2": "+69(3)0049980344",
    "file_id": "1",
    "email1": "[email protected]",
    "email2": "[email protected]",
    "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>