Angular allows for the editing of a table by double-clicking and using an array of objects

Question

Angular allows for the editing of a table by double-clicking and using an array of objects

I am dealing with an array of objects structured 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
}];

I have created a table 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>

Functions for editing:

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

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

The issue I'm facing is that all keys have the same name in each object, how can I implement double-click functionality to update the table values?

javascript html css angularjs data-binding

Answer 1

Answer №1

To ensure that each input updates the corresponding item, simply utilize Angular's ng-model directive with your inputs.

For instance, in the first column, implement it like this:

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

Here is an example of how your HTML should look like:


    <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:

If you encounter the issue mentioned in the comments, here is an updated Demo snippet that addresses editing only the clicked column instead of the entire 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 have introduced an editableColumn variable in the scope to keep track of the selected column for editing purposes.

Answer 2

To ensure that each input updates the corresponding item, simply utilize Angular's ng-model directive with your inputs.

For instance, in the first column, implement it like this:

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

Here is an example of how your HTML should look like:


    <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:

If you encounter the issue mentioned in the comments, here is an updated Demo snippet that addresses editing only the clicked column instead of the entire 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 have introduced an editableColumn variable in the scope to keep track of the selected column for editing purposes.

Angular allows for the editing of a table by double-clicking and using an array of objects

Answer №1

Similar questions

retrieve a reply from a PHP script and incorporate it into JavaScript following an AJAX request

Exploring an HTML document with XPath expressions

Stop an item from being included based on a boolean value

Struggling to remove quotation marks from a string that was originally an array before being converted?

The background image does not appear on the animated div until the browser window is resized

Invoking a function without specifying its parent function when nested within another function

Is it not possible to perform multiple queries using values stored in an array?

Importing a file using its absolute path in JavaScript

Is it possible to exchange CSS classes for a specific group of elements using JQuery?

Display various JavaScript function outputs in an HTML table for convenient tracking

Sending a parameter from a click event to a function

Fixing the error message stating 'Argument of type '{}' is not assignable to parameter of type 'any[]'. [ng] Property 'length' is missing in type '{}'. Here are steps to resolve this issue:

Boosting vertical reach within a distance

Exploring the Power of AngularJS Directives: Unleashing the Potential

Eliminate the golden hue from the input field when autofill is activated

Navigation bar limited to text links only

Errors encountered while starting Angular due to issues in package.json configuration

Achieving equal height in Bootstrap columns

Tips for accessing and manipulating the parent, sibling, next, and previous elements of the current element with AngularJS

"angular-seed's web-script.js and cross-origin resource sharing (cors