title: Disable other rows when editing one row - editing individual row of a table
body: <p>In the following html code, when one row is in an editing mode(the edit button on this row is clicked), the edit button on the rest of the rows shall be disabled. And when one row is in the edit mode, data will show up in a text input field.</p>
  
  <pre><code>            &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class="col-sm-4"&gt;Branch Name&lt;/th&gt;
                      &lt;th class="col-sm-3"&gt;Branch ID&lt;/th&gt;
                      &lt;th class="col-sm-3"&gt;Foo&lt;/th&gt;
                      &lt;th class="col-sm-1"&gt;Doo&lt;/th&gt;
                      &lt;th class="col-sm-3"&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;tr ng-repeat="branch in branches"&gt;
              &lt;td id="name"         ng-bind="branch.name"&gt;&lt;/td&gt;
              &lt;td id="ID"    ng-bind="branch.id"&gt;&lt;/td&gt;
              &lt;td id="foo" data-editable&gt;
                  &lt;span ng-hide="editMode" ng-bind="branch.foo"&gt;&lt;/span&gt;
                  &lt;input class="form-control" data-ng-show="editMode" id="foo" data-ng-model="branch.foo"/&gt;
              &lt;/td&gt;
              &lt;td id="doo" data-editable&gt;
                  &lt;span ng-hide="editMode" ng-bind="branch.doo"&gt;&lt;/span&gt;
                  &lt;input class="form-control" data-ng-show="editMode" id="do" ng-model="branch.doo"/&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;button type="submit" class="btn btn-default" data-ng-disabled="editing" data-ng-show="!editMode" data-ng-click="editMode = true; editEntry(branch)"&gt;Edit&lt;/button&gt;
                  &lt;span ng-show="editMode" class="pull-right"&gt;
                      &lt;button type="submit" class="btn btn-default" data-ng-disabled="!enableToSave(branch)" data-ng-click="editMode = false; saveEntry(branch)"&gt;Save&lt;/button&gt;
                      &lt;button type="submit" class="btn btn-default" ng-show="editMode" data-ng-click="editMode = false; cancelEditing(branch)"&gt;Cancel&lt;/button&gt;
                  &lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p>The control mechanics is the "editMode".The Javascript/AngulaJS code is something like the followings:</p>
  
  <pre><code>$scope.editing = false;
  
  $scope.editEntry = function(branch) {
      if ($scope.editing !== false) {
          ...
      } else {
          $scope.editing = true;
          ....
      }
  }
  
  $scope.saveEntry = function(branch){
     ...
     $scope.editing = false;
  }
  
  $scope.cancelEditing = function(branch){
      if ($scope.editing !== false) {
          $scope.editing = false;
          ...
      }
  }
  
  $scope.enableToSave = function(branch){
     ...
  }
  </code></pre>
  
  <p>The approach, however, doesn't seem to be reliable. Any better approaches?</p>