Edit table with array of objects on double click in angular

Question

I have array of objects like this:

$scope.rows = 
[{
    num1: 56,
    num2: 78,
    num3: 89
}, {
    num1: 56,
    num2: 78,
    num3: 89
}, {
    num1: 56,
    num2: 78,
    num3: 89
}, {
    num1: 56,
    num2: 78,
    num3: 89
}];

Table created using ng-repeat:

<div id="structure">
    <table border='1|1'>
        <tr ng-repeat="item in rows">
            <td>
                <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num1}}</span>
                <input ng-show="item.editing" ng-blur="doneEditing(item)" autofocus/>
            </td>
            <td>
                <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num2}}</span>
                <input ng-show="item.editing" ng-blur="doneEditing(item)" autofocus/>
            </td>
            <td>
                <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num3}}</span>
                <input ng-show="item.editing" ng-blur="doneEditing(item)" autofocus/>
            </td>
        </tr>
    </table>
</div>

Edit functions:

$scope.editItem = function (item) {
    item.editing = true;
};

$scope.doneEditing = function (item) {
    item.editing = false;
};

The problem is all the keys names are same in each object, how to double click and update the table values?

cнŝdk · Accepted Answer · 2017-10-03 13:43:30Z

You just need to use Angular's ng-model directive with your inputs, so they update the respective item, so each input value is binded to its corresponding item number.

For example in the fisrt column you define it like this:

<input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num1" autofocus/>

This is how should be your HTML:

    <tr ng-repeat="item in rows">
      <td>
        <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num1}}</span>
        <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num1" autofocus/>
      </td>
      <td>
        <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num2}}</span>
        <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num2" autofocus/>
      </td>
      <td>
        <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num3}}</span>
        <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num3" autofocus/>
      </td>
    </tr>

Demo:

function myCtrl($scope) {

  $scope.rows = [{
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }];

  $scope.editItem = function(item) {
    item.editing = true;
  };

  $scope.doneEditing = function(item) {
    item.editing = false;
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app>
  <div ng-controller="myCtrl">
    <div id="structure">
      <table border='1|1'>
        <tr ng-repeat="item in rows">
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num1}}</span>
            <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num1" autofocus/>
          </td>
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num2}}</span>
            <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num2" autofocus/>
          </td>
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.num3}}</span>
            <input ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.num3" autofocus/>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

Edit:

To fix the problem you stated in comments, this is an updated Demo snippet that takes into account affecting only, clicked column instead of the whole row.

function myCtrl($scope) {
  
  $scope.editableColumn = 0;

  $scope.rows = [{
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }, {
    num1: 56,
    num2: 78,
    num3: 89
  }];

  $scope.editItem = function(item, col) {
    item.editing = true;
    $scope.editableColumn = col;
  };

  $scope.doneEditing = function(item) {
    item.editing = false;
    $scope.editableColumn = 0;
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app>
  <div ng-controller="myCtrl">
    <div id="structure">
      <table border='1|1'>
        <tr ng-repeat="item in rows">
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item, 1)">{{item.num1}}</span>
            <input ng-show="item.editing && editableColumn == 1" ng-blur="doneEditing(item)" ng-model="item.num1"/>
          </td>
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item, 2)">{{item.num2}}</span>
            <input ng-show="item.editing && editableColumn == 2" ng-blur="doneEditing(item)" ng-model="item.num2"/>
          </td>
          <td>
            <span ng-hide="item.editing" ng-dblclick="editItem(item, 3)">{{item.num3}}</span>
            <input ng-show="item.editing && editableColumn == 3" ng-blur="doneEditing(item)" ng-model="item.num3"/>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

I just added an editableColumn variable in the scope that will be always updated with the number of the column to be edited.

With this three columns are going into edit mode. I want only on tag to be in edit mode...
@Satyadev I don't get it? which column? How it should be updated?
If you double click on any of the columns, all the three columns get input box
Ah, it's due to your implementation you are applying item.editing to the whole item, instead of the nums.

Collectives™ on Stack Overflow

Edit table with array of objects on double click in angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related