角度 js 中的内容可编辑 [英] Content-Editable in the angular js
本文介绍了角度 js 中的内容可编辑的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一张如下所示的表格
╔=====╦=====╦=====╦=====╗║ A ║ B ║ C ║ D ║╠=====╬=====╬=====╬=====╣║ abc ║ pqr ║ XYZ ║ RSY ║╚=====╩=====╩=====╩=====╝现在，在此表中，我将 HTML5 的 content-editable 用于 column B.
有了这个，我可以编辑列B的内容.现在，在这里，当我编辑这个时，有什么办法可以让我知道哪一行被编辑了以及列 An 的值，假设我已经编辑了
pqr ->啊啊啊啊那么它应该像
╔=====╦=====╦=====╦=====╗║ A ║ B ║ C ║ D ║╠=====╬=====╬=====╬=====╣║ abc ║ aaa ║ XYZ ║ RSY ║╚=====╩=====╩=====╩=====╝现在我正在使用 jquery 来了解表格的内容.
<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="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> 解决方案
Custom contenteditable Directive
要使 contenteditable
与 ngModelController:
创建一个自定义指令:
app.directive('contenteditable', ['$sce', function($sce) {返回 {限制: 'A',//只在元素属性上激活require: '?ngModel',//获取 NgModelController链接:函数(范围、元素、属性、ngModel){如果(！ngModel)返回；//如果没有 ng-model 则什么都不做//指定 UI 应该如何更新ngModel.$render = function() {element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));};//监听更改事件以启用绑定element.on('blur keyup change', function() {scope.$evalAsync(read);});读();//初始化//向模型写入数据函数读取(){var html = element.html();//当我们清除可编辑的内容时，浏览器会留下一个 <br>在后面//如果提供了 strip-br 属性，那么我们将其去掉if (attrs.stripBr && html === '<br>') {html = '';}ngModel.$setViewValue(html);}}};}]);
演示
angular.module('app', ['ngSanitize']).directive('contenteditable', ['$sce', function($sce) {返回 {限制: 'A',//只在元素属性上激活require: '?ngModel',//获取 NgModelController链接:函数(范围、元素、属性、ngModel){如果(！ngModel)返回；//如果没有 ng-model 则什么都不做//指定 UI 应该如何更新ngModel.$render = function() {element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));};//监听更改事件以启用绑定element.on('blur keyup change', function() {scope.$evalAsync(read);});读();//初始化//向模型写入数据函数读取(){var html = element.html();//当我们清除可编辑的内容时，浏览器会留下一个 <br>在后面//如果提供了 strip-br 属性，那么我们将其去掉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"><表单名称="myForm"><p>点击下面的div进行编辑</p><div 内容可编辑名称="myWidget" ng-model="userContent"带-br=真"需要>改变我！</div><span ng-show="myForm.myWidget.$error.required">必需！</span><小时><textarea ng-model="userContent" aria-label="动态文本区域"></textarea></表单>
