Angular js中的内容可编辑

Posted 2023-05-09

【中文标题】Angular js中的内容可编辑

【英文标题】：Content-Editable in the angular js

【发布时间】：2018-01-16 03:27:39

【问题描述】：

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

╔═════╦═════╦═════╦═════╗
║  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>

【参考方案1】：

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

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

【参考方案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 来实现。

【讨论】：

请提供有关数据控制器的一些详细信息或使 sn-p 成为工作示例。

您的回答很有帮助。但我也想要像这样的 TEST1 ccdcdc 之类的第一列的值。

【参考方案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