Content-Editable in the angular js

Question

I have a table as shown below

╔═════╦═════╦═════╦═════╗
║  A  ║  B  ║  C  ║  D  ║
╠═════╬═════╬═════╬═════╣
║ abc ║ pqr ║ XYZ ║ RSY ║
╚═════╩═════╩═════╩═════╝

Now, In this table, I am using a content-editable of HTML5 for the column B.

With this, I am able to edit the contents of the column B . Now, Here when I edit this, Is there any way through I will get to know which row has been edited and the value of a column An as well like, suppose I have edited

pqr ->  aaa 

then It should be like

╔═════╦═════╦═════╦═════╗
║  A  ║  B  ║  C  ║  D  ║
╠═════╬═════╬═════╬═════╣
║ abc ║ aaa ║ XYZ ║ RSY ║
╚═════╩═════╩═════╩═════╝

Right now I am using jquery to know the content of the table.

 <div class="table-responsive">
  <table class="table table-striped table-bordered report-table" contextmenu-container="meta.contextmenu" fixed-header>
    <thead class="text-center text-info">
      <th class="text-center">Annotation</th>
      <th class="text-center">Field</th>
      <th class="text-center">Message</th>
      <th class="text-center">Score</th>
    </thead>
    <tr ng-repeat="report in reports.data">
      <td class="text-center">{{ report.attributes.annotation }}</td>
      <td class="td-report-field" contentEditable contextmenu-item="report" context-menu="menuOptions">{{ report.attributes.field }}</td>
      <td>
        <input type="checkbox" ng-if="report.attributes.message && showcheckbox" ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
        <span ng-if="report.attributes.message" ng-model="report.attributes.message">
                          {{ report.attributes.message }}
                        </span>
        <span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
      </td>
      <td class="text-center">{{ report.attributes.score }}</td>
    </tr>
  </table>
</div>

Answer 1

I don't have enough reputation to comment it, but you might want to take a look here : contenteditable change events

My idea on your problem would be to use scope watchers (meaning you need to bind your b input model to a scope variable) or MutationObservers if you just want to react to DOM change

Answer 2

if i understand you correctly following snippet will help you.

var contentEdited = false;

function editAction($el) {
  if (contentEdited) {
    var text = $el[0].innerText.trim();
    console.log(text);
    contentEdited = false;
  }
}
$("td.changeable").on("blur", function() {
  editAction($(this));
}).on("DOMSubtreeModified", function() {
  contentEdited = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>TEST 1</td>
      <td class="changeable" contenteditable="true">TEST 2</td>
      <td>TEST 3</td>
    </tr>
    <tr>
      <td>TEST 1</td>
      <td class="changeable" contenteditable="true">TEST 2</td>
      <td>TEST 3</td>
    </tr>
    <tr>
      <td>TEST 1</td>
      <td class="changeable" contenteditable="true">TEST 2</td>
      <td>TEST 3</td>
    </tr>
    <tr>
      <td>TEST 1</td>
      <td class="changeable" contenteditable="true">TEST 2</td>
      <td>TEST 3</td>
    </tr>
  </tbody>
</table>

If you want to use it in angular your can do it by replacing $ with angular.element.

Answer 3

Custom contenteditable Directive

To make a contenteditable <div> work with the ngModelController:

 <div contenteditable
      name="myWidget" ng-model="userContent"
      strip-br="true"
      required>Change me!
 </div>

Create a custom directive:

  app.directive('contenteditable', ['$sce', function($sce) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if (attrs.stripBr && html === '<br>') {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  }]);

The DEMO

angular.module('app', ['ngSanitize'])
.directive('contenteditable', ['$sce', function($sce) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if (attrs.stripBr && html === '<br>') {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
}])

  <script src="//unpkg.com/angular/angular.js"></script>
  <script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<body ng-app="app">
  <form name="myForm">
 <p>Click on below div to edit</p>
 <div contenteditable
      name="myWidget" ng-model="userContent"
      strip-br="true"
      required>Change me!</div>
  <span ng-show="myForm.myWidget.$error.required">Required!</span>
 <hr>
 <textarea ng-model="userContent" aria-label="Dynamic textarea"></textarea>
</form>
</body>

For more information, see AngularJS ngModelController API Reference - Custom Control Example