内容可在角度js中编辑 [英] Content-Editable in the angular js
本文介绍了内容可在角度js中编辑的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一张如下图所示的表格
╔═══════════════ ══╦═════╗
║A║B║C║D║
════════════════════════ ╣
║abc║pqr║XYZ║RSY║
╚═════════════════════════════════════ة c $ c> 现在，在此表中，我使用内容可编辑的 HTML5 用于列B 。
有了这个，我可以编辑栏B
的内容。
现在，这里当我编辑它时，有没有办法通过我将知道哪一行已被编辑以及列An的值也是如此，假设我已经编辑了
pqr - > aaa
那么它应该像
╔═════════════════════════b $ b║A║B║C║D║
╠═══════════════════════╣
║abc║aaa║XYZ║RSY║
╚═════════局════════════════════════════════（（（（（（（（（（（（（（（（我正在使用 jquery 来了解该表的内容。 < div class =table-responsive>
< table class =table table-striped table-bordered report-tablecontextmenu-container =meta.contextmenufixed-header>
< thead class =text-center text-info>
< th class =text-center>注释< / th>
< th class =text-center>字段< / th>
< th class =text-center>消息< / th>
< th class =text-center>得分< / th>
< / thead>
< tr ng-repeat =report.data中的报告>
< td class =text-center> {{report.attributes.annotation}}< / td>
< td class =td-report-fieldcontentEditable contextmenu-item =reportcontext-menu =menuOptions> {{report.attributes.field}}< / td>
< td>
< input type =checkboxng-if =report.attributes.message&& showcheckboxng-bind =report.attributes.messageng-click =getcheckedData（report.attributes。消息）>
< span ng-if =report.attributes.messageng-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>
解决方案
自定义 contenteditable 指令
制作 contenteditable < div> 使用 ngModelController ：
< div contenteditable
name =myWidgetng-model =userContent
strip-br =true需要
>改变我！
< / div>
创建自定义指令：
app.directive（'contenteditable'，['$ sce '，function（$ sce）{
return {
restrict：'A'，//仅在元素属性上激活
require：'？ngModel'，//获取NgModelController
link：function（scope，element，attrs，ngModel）{
if（！ngModel）return; //如果没有ng-model
//什么都不做//指定UI应该如何更新
ngModel。$ render = function（）{
element.html（$ sce.getTrustedHtml（ngModel。$ viewValue ||''））;
};
//侦听更改事件以启用绑定
element.on（'blur keyup change'，function（）{
scope。$ evalAsync（read）;
}）;
read（）; //初始化
//将数据写入模型
函数n read（）{
var html = element.html（）;
//当我们清除可编辑的内容时，浏览器会留下< br>在
之后//如果提供了strip-br属性，那么我们将其剥离
if（attrs.stripBr&& html ==='< br>'）{
html = '';
}
ngModel。$ setViewValue（html）;
}
}
};
}]）;
DEMO
angular.module（'app'，['ngSanitize']）。指令（'contenteditable'，['$ sce'，函数（$ sce）{return {restrict：'A'，//仅在元素上激活属性require：'？ngModel'，//得到一个NgModelController链接：function（scope，element，attrs，ngModel）{if（！ngModel）return; //如果没有ng-model则什么都不做//指定UI应该如何更新ngModel。$ render = function（）{element.html（$ sce.getTrustedHtml（ngModel。$ viewValue ||''））;}; //侦听更改事件以启用绑定element.on（'模糊键更改'，function（）{范围。$ evalAsync（read）;}）;读（）; //初始化//将数据写入模型函数read（）{var html = element.html（）; //当我们清除可编辑的内容时，浏览器会留下< br>后面//如果提供了strip-br属性，那么我们将其删除如果（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>点击下面的div来编辑< / p> < div contenteditable name =myWidgetng-model =userContentstrip-br =truerequired> Change me！< / div> < span ng-show =myForm.myWidget。$ error.required>必填！< / span> < HR> < textarea ng-model =userContentaria-label =Dynamic textarea>< / textarea>< / form>< / body>
有关详细信息，请参阅 AngularJS ngModelController API参考 - 自定义控件示例
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>
解决方案 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
这篇关于内容可在角度js中编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
