Angular js中的内容可编辑

Question

我有一张如下图所示的表格

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

现在，在此表中，我将 content-editable 或 HTML5 用于 column B。

有了这个，我可以编辑column B 的内容 . 现在，在这里，当我编辑此内容时，有什么方法可以让我知道已编辑了哪一行以及列 An 的值，假设我已编辑

pqr ->  aaa 

那么应该是这样的

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

现在我正在使用jquery 来了解表格的内容。

 <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

我没有足够的声誉来评论它，但你可能想看看这里：contenteditable change events

我对您的问题的想法是使用范围观察者（意味着您需要将 b 输入模型绑定到范围变量）或 MutationObservers 如果您只想对 DOM 更改做出反应

Answer 2

如果我对你的理解正确，那么下面的 sn-p 将对你有所帮助。

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>

如果你想在 Angular 中使用它，你可以通过将 $ 替换为 angular.element 来实现。

Answer 3

自定义contenteditable 指令

要使contenteditable <div> 与ngModelController 一起工作：

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

创建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>

欲了解更多信息，请参阅AngularJS ngModelController API Reference - Custom Control Example