内容可在角度js中编辑

我有一张桌子如下图所示

╔═════╦═════╦═════╦═════╗ ║ 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来了解表的内容。

  
 
 
 
Annotation
 
Field
 
Message
 
Score
 
 
 
{{ report.attributes.annotation }}
 
{{ report.attributes.field }}
 
   {{ report.attributes.message }}  {{ report.attributes.message }} 
 
{{ report.attributes.score }}
 
 
  

Answer 1

我没有足够的声誉来评论它，但你可能想看看这里： 可疑的变化事件

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

Answer 2

如果我理解你正确遵循片段会帮助你。

 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; }); 

  
 
 
 
TEST 1
 
TEST 2
 
TEST 3
 
 
 
TEST 1
 
TEST 2
 
TEST 3
 
 
 
TEST 1
 
TEST 2
 
TEST 3
 
 
 
TEST 1
 
TEST 2
 
TEST 3
 
 
  

Answer 3

自定义的contenteditable指令

要使用ngModelController使用contenteditable

：

  
Change me!  

创建自定义指令 ：

  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 
 behind // If strip-br attribute is provided then we strip this out if (attrs.stripBr && html === '
') { html = ''; } ngModel.$setViewValue(html); } } }; }]); 

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 
 behind // If strip-br attribute is provided then we strip this out if (attrs.stripBr && html === '
') { html = ''; } ngModel.$setViewValue(html); } } }; }]) 

     
 
Click on below div to edit
 
Change me!
 Required!