This video is a good representation of the issue I am facing: https://drive.google.com/file/d/1jN44lUpnbVDv_m3LuPhlJl6RFUu884jz/view. I cannot copy and paste a table from another a tab without it breaking down. Because this uses local storage, here is a JSFiddle: https://jsfiddle.net/znj537w0/1/.
JavaScript
x
125
125
1
var app = angular.module("TodoApp", ["LocalStorageModule", 'ngSanitize']);
2
app.controller("TodoController", function ($scope, localStorageService) {
3
if (!localStorageService.get("taskListActive")) {
4
$scope.tasksActive = [{
5
text: "Do me next",
6
priority: 1,
7
complete: false
8
},
9
{
10
text: "I'm not important",
11
priority: 0,
12
complete: false
13
}
14
];
15
} else {
16
$scope.tasksActive = localStorageService.get("taskListActive");
17
}
18
19
if (!localStorageService.get("taskListComplete")) {
20
$scope.tasksComplete = [{
21
text: "I'm already done",
22
priority: 0,
23
complete: true
24
}];
25
} else {
26
$scope.tasksComplete = localStorageService.get("taskListComplete");
27
}
28
29
$scope.totalTasks = function () {
30
console.log($scope.tasksComplete.length);
31
return $scope.tasksActive.length + $scope.tasksComplete.length;
32
};
33
34
$scope.totalRemaining = function () {
35
return $scope.tasksActive.length;
36
};
37
38
$scope.totalComplete = function () {
39
return $scope.tasksActive.length;
40
};
41
42
$scope.todoAdd = function () {
43
if ($scope.taskInput.name) {
44
$scope.tasksActive.unshift({
45
text: $scope.taskInput.name,
46
priority: $scope.taskInput.priority || 0,
47
complete: false
48
});
49
$scope.taskInput.name = "";
50
$scope.taskInput.priority = 0;
51
}
52
};
53
54
$scope.togglePriority = function (task) {
55
if (task.priority === 0) {
56
task.priority = 1;
57
console.log("a");
58
} else {
59
task.priority = 0;
60
}
61
};
62
63
$scope.completeTask = function (task) {
64
//var task = $scope.tasksActive[index];
65
task.complete = true;
66
task.priority = 0;
67
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
68
$scope.tasksComplete.unshift(task);
69
};
70
71
$scope.uncompleteTask = function (task) {
72
task.complete = false;
73
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
74
$scope.tasksActive.unshift(task);
75
};
76
77
$scope.deleteTask = function (task, list) {
78
if (list == "active") {
79
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
80
} else {
81
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
82
}
83
};
84
85
$scope.clearCompleted = function () {
86
var deleteArr = [];
87
for (var i = 0; i < $scope.tasksComplete.length; i++) deleteArr.push(i);
88
for (var i = 0; i < deleteArr.length; i++) {
89
var task = i;
90
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task) - 1, 1);
91
}
92
};
93
94
$scope.$watch(
95
"tasksActive",
96
function (newVal, oldVal) {
97
console.log("tasksActive");
98
if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
99
localStorageService.add("taskListActive", angular.toJson(newVal));
100
}
101
},
102
true
103
);
104
105
$scope.$watch(
106
"tasksComplete",
107
function (newVal, oldVal) {
108
console.log("tasksComplete");
109
if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
110
localStorageService.add("taskListComplete", angular.toJson(newVal));
111
}
112
},
113
true
114
);
115
116
$scope.contentEdit = function (event, task) {
117
const newText = event.target.innerText;
118
if (newText && task) {
119
task.text = newText;
120
console.log(event.target.innerText);
121
}
122
}
123
});
124
125
const newText = event.target.innerHTML;
JavaScript
1
611
611
1
*,
2
*:before,
3
*:after {
4
box-sizing: border-box;
5
}
6
7
.max-width {
8
max-width: 600px;
9
}
10
11
.centered {
12
margin: auto;
13
}
14
15
.text-center-h {
16
text-align: center;
17
}
18
19
.text-left {
20
text-align: left;
21
}
22
23
.text-right {
24
text-align: right;
25
}
26
27
.list-no-style {
28
list-style: none outside none;
29
padding-left: 0;
30
}
31
32
html,
33
body {
34
width: 100%;
35
min-height: 100%;
36
color: #333;
37
padding: 20px 20px 20px 10px;
38
}
39
40
html {
41
font-size: 10px;
42
}
43
44
body {
45
font-size: 1.6rem;
46
background: linear-gradient(45deg, #bbdefb 0%, #311b92 100%);
47
}
48
49
p {
50
white-space: pre-wrap;
51
margin: 1em;
52
color: #777;
53
}
54
55
.block {
56
font-size: 0;
57
margin-bottom: 24px;
58
}
59
60
.block>* {
61
font-size: medium;
62
display: inline-block;
63
vertical-align: top;
64
}
65
66
.block-justify {
67
text-align: justify;
68
}
69
70
.block-justify:after {
71
content: '';
72
display: inline-block;
73
width: 100%;
74
}
75
76
.block-justify>* {
77
display: inline-block;
78
vertical-align: top;
79
}
80
81
.block-table {
82
display: table;
83
table-layout: fixed;
84
width: 100%;
85
}
86
87
.block-table>* {
88
display: table-cell;
89
}
90
91
.fa {
92
font-size: 2rem;
93
color: #bbb;
94
padding: 0 6px;
95
transition: color 0.2s ease;
96
}
97
98
.fa.-clickable {
99
cursor: pointer;
100
}
101
102
button.-add,
103
.btn.-add {
104
border: none;
105
padding: 5px 0 0;
106
border-bottom: 3px solid #0eb2f0;
107
background: #56c9f5;
108
transition: all 0.1s ease;
109
}
110
111
button.-add:hover,
112
.btn.-add:hover {
113
background: #6ed1f6;
114
}
115
116
button.-add:active,
117
.btn.-add:active {
118
border-bottom-width: 1px;
119
}
120
121
button.-clear,
122
.btn.-clear {
123
border: none;
124
padding: 0;
125
background: none;
126
color: #bbb;
127
}
128
129
button.-clear:hover,
130
.btn.-clear:hover {
131
color: tomato;
132
}
133
134
.task-list._wrap {
135
background: #fff;
136
padding: 20px;
137
margin-top: 50px;
138
margin-bottom: 50px;
139
box-shadow: 18px 18px 0 0 #56c9f5;
140
}
141
142
.task-list._wrap h1 {
143
font-size: 5rem;
144
}
145
146
.totals._wrap,
147
.search {
148
vertical-align: bottom;
149
}
150
151
.totals._wrap {
152
font-size: 0;
153
}
154
155
.totals._grand-total,
156
.totals._detail {
157
display: inline-block;
158
vertical-align: top;
159
font-size: medium;
160
}
161
162
.totals._grand-total {
163
text-align: center;
164
height: 90px;
165
padding: 6px 12px;
166
background: #64b5f6;
167
color: #fff;
168
overflow: hidden;
169
}
170
171
.totals._grand-total span {
172
display: block;
173
}
174
175
.totals._total-number {
176
font-size: 3rem;
177
}
178
179
.totals._detail p {
180
height: 60px;
181
padding: 3px 6px;
182
}
183
184
.search._wrap {
185
position: relative;
186
}
187
188
.search .fa {
189
position: absolute;
190
left: 3px;
191
top: 50%;
192
transform: translateY(-50%);
193
}
194
195
.search input.-text {
196
padding-left: 30px;
197
}
198
199
.add-form._wrap {
200
position: relative;
201
height: 80px;
202
padding: 12px;
203
border: 1px solid #694ede;
204
box-shadow: 3px 3px 0 0 #694ede;
205
}
206
207
.add-form input[type="text"] {
208
width: 100%;
209
}
210
211
.add-form._buttons {
212
position: absolute;
213
right: 12px;
214
padding: 2px;
215
width: 180px;
216
font-size: 0;
217
}
218
219
.add-form._checkbox-wrap,
220
.add-form._submit-button {
221
display: inline-block;
222
vertical-align: middle;
223
font-size: medium;
224
height: 100%;
225
}
226
227
.add-form._checkbox {
228
padding: 0 12px;
229
}
230
231
.add-form._checkbox input {
232
visibility: hidden;
233
}
234
235
.add-form._checkbox .fa:hover {
236
color: #7b7b7b;
237
}
238
239
.add-form._checkbox input:checked+.fa {
240
color: tomato;
241
}
242
243
.add-form._submit-button {
244
height: 42px;
245
padding: 0 20px;
246
}
247
248
input.-text {
249
padding: 6px 12px;
250
height: 46px;
251
}
252
253
input.-add-task {
254
border: none;
255
border: 2px solid #64b5f6;
256
}
257
258
input.-search {
259
border: 2px solid #64b5f6;
260
}
261
262
.task._item {
263
background: #fff;
264
box-shadow: 3px 3px 0 0;
265
border: 1px solid;
266
overflow: auto;
267
margin-bottom: 6px;
268
}
269
270
.task._item a {
271
text-decoration: none;
272
}
273
274
.task.-done-false {
275
color: #56c9f5;
276
}
277
278
.task.-done-false p,
279
.task.-done-false a {
280
color: #333;
281
}
282
283
.task.-done-true {
284
color: #d5d5d5;
285
}
286
287
.task.-done-true p,
288
.task.-done-true a {
289
color: #bbb;
290
}
291
292
.task._task-left,
293
.task._task-right {
294
height: 66px;
295
padding: 10px;
296
}
297
298
.task._task-left {
299
width: calc(100% - 180px);
300
margin-bottom: 15px;
301
height: 100px;
302
overflow: auto;
303
}
304
305
.task._task-right {
306
width: 180px;
307
overflow: auto;
308
}
309
310
.task._task-right .btn {
311
display: inline-block;
312
margin-top: 3px;
313
margin-bottom: 15px;
314
}
315
316
.task._task-right .btn.-priority:hover .fa {
317
color: #7b7b7b;
318
}
319
320
.task._task-right .btn.-complete:hover .fa,
321
.task._task-right .btn.-re-open:hover .fa {
322
color: #0eb2f0;
323
}
324
325
.task._task-right .btn.-clear:hover .fa {
326
color: tomato;
327
}
328
329
.task.-task-priority-high ._task-left {
330
padding-left: 28px;
331
position: relative;
332
}
333
334
.task.-task-priority-high ._task-left:before {
335
position: absolute;
336
content: '';
337
width: 6px;
338
top: 12px;
339
bottom: 12px;
340
left: 12px;
341
background: tomato;
342
}
343
344
.task.-task-priority-high .btn.-priority .fa {
345
color: tomato;
346
}
347
348
p {
349
margin: 1em;
350
color: #777;
351
}
352
353
p.changed {
354
color: black;
355
}
356
357
button {
358
margin: 0 1em;
359
}
360
361
.btn {
362
display: inline-block;
363
*display: inline;
364
padding: 4px 10px 4px;
365
margin-bottom: 0;
366
*margin-left: 0.3em;
367
font-size: 13px;
368
line-height: 18px;
369
*line-height: 20px;
370
color: #333;
371
text-align: center;
372
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
373
vertical-align: middle;
374
cursor: pointer;
375
background-color: #f5f5f5;
376
*background-color: #e6e6e6;
377
background-image: -ms-linear-gradient(top, #fff, #e6e6e6);
378
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
379
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
380
background-image: -o-linear-gradient(top, #fff, #e6e6e6);
381
background-image: linear-gradient(top, #fff, #e6e6e6);
382
background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
383
background-repeat: repeat-x;
384
border: 1px solid #ccc;
385
*border: 0;
386
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
387
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
388
border-bottom-color: #b3b3b3;
389
-webkit-border-radius: 4px;
390
-moz-border-radius: 4px;
391
border-radius: 4px;
392
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
393
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
394
*zoom: 1;
395
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
396
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
397
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
398
}
399
400
.btn:hover {
401
background-color: #e6e6e6;
402
*background-color: #d9d9d9;
403
color: #333;
404
text-decoration: none;
405
background-color: #e6e6e6;
406
*background-color: #d9d9d9;
407
background-position: 0 -15px;
408
-webkit-transition: background-position 0.1s linear;
409
-moz-transition: background-position 0.1s linear;
410
-ms-transition: background-position 0.1s linear;
411
-o-transition: background-position 0.1s linear;
412
transition: background-position 0.1s linear;
413
}
414
415
.btn:active {
416
background-color: #e6e6e6;
417
*background-color: #d9d9d9;
418
background-color: #ccc 9;
419
background-color: #e6e6e6;
420
background-color: #d9d9d9 9;
421
background-image: none;
422
outline: 0;
423
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
424
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
425
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
426
}
427
428
.btn:first-child {
429
*margin-left: 0;
430
}
431
432
.btn:focus {
433
outline: thin dotted #333;
434
outline: 5px auto -webkit-focus-ring-color;
435
outline-offset: -2px;
436
}
437
438
.btn.active {
439
background-color: #e6e6e6;
440
*background-color: #d9d9d9;
441
background-color: #ccc 9;
442
background-color: #e6e6e6;
443
background-color: #d9d9d9 9;
444
background-image: none;
445
outline: 0;
446
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
447
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
448
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
449
}
450
451
.btn.disabled {
452
background-color: #e6e6e6;
453
*background-color: #d9d9d9;
454
}
455
456
.btn[disabled] {
457
background-color: #e6e6e6;
458
*background-color: #d9d9d9;
459
}
460
461
.btn-primary {
462
background-color: #0074cc;
463
*background-color: #05c;
464
background-image: -ms-linear-gradient(top, #08c, #05c);
465
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#05c));
466
background-image: -webkit-linear-gradient(top, #08c, #05c);
467
background-image: -o-linear-gradient(top, #08c, #05c);
468
background-image: -moz-linear-gradient(top, #08c, #05c);
469
background-image: linear-gradient(top, #08c, #05c);
470
background-repeat: repeat-x;
471
border-color: #05c #05c #003580;
472
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
473
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
474
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
475
color: #fff;
476
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
477
}
478
479
.btn-primary:hover {
480
background-color: #05c;
481
*background-color: #004ab3;
482
color: #fff;
483
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
484
}
485
486
.btn-primary:active {
487
background-color: #05c;
488
*background-color: #004ab3;
489
background-color: #004099 9;
490
}
491
492
.btn-primary.active {
493
background-color: #05c;
494
*background-color: #004ab3;
495
background-color: #004099 9;
496
color: rgba(255, 255, 255, 0.75);
497
}
498
499
.btn-primary.disabled {
500
background-color: #05c;
501
*background-color: #004ab3;
502
}
503
504
.btn-primary[disabled] {
505
background-color: #05c;
506
*background-color: #004ab3;
507
}
508
509
.btn-warning {
510
background-color: #faa732;
511
*background-color: #f89406;
512
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
513
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
514
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
515
background-image: -o-linear-gradient(top, #fbb450, #f89406);
516
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
517
background-image: linear-gradient(top, #fbb450, #f89406);
518
background-repeat: repeat-x;
519
border-color: #f89406 #f89406 #ad6704;
520
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
521
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
522
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
523
color: #fff;
524
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
525
}
526
527
.btn-warning:hover {
528
background-color: #f89406;
529
*background-color: #df8505;
530
color: #fff;
531
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
532
}
533
534
.btn-warning:active {
535
background-color: #f89406;
536
*background-color: #df8505;
537
background-color: #c67605 9;
538
}
539
540
.btn-warning.active {
541
background-color: #f89406;
542
*background-color: #df8505;
543
background-color: #c67605 9;
544
color: rgba(255, 255, 255, 0.75);
545
}
546
547
.btn-warning.disabled {
548
background-color: #f89406;
549
*background-color: #df8505;
550
}
551
552
.btn-warning[disabled] {
553
background-color: #f89406;
554
*background-color: #df8505;
555
}
556
557
.btn-danger {
558
color: #fff;
559
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
560
}
561
562
.btn-danger:hover {
563
color: #fff;
564
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
565
}
566
567
.btn-success {
568
color: #fff;
569
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
570
}
571
572
.btn-success:hover {
573
color: #fff;
574
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
575
}
576
577
.btn-info {
578
color: #fff;
579
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
580
}
581
582
.btn-info:hover {
583
color: #fff;
584
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
585
}
586
587
.btn-inverse {
588
color: #fff;
589
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
590
}
591
592
.btn-inverse:hover {
593
color: #fff;
594
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
595
}
596
597
.btn-danger.active {
598
color: rgba(255, 255, 255, 0.75);
599
}
600
601
.btn-success.active {
602
color: rgba(255, 255, 255, 0.75);
603
}
604
605
.btn-info.active {
606
color: rgba(255, 255, 255, 0.75);
607
}
608
609
.btn-inverse.active {
610
color: rgba(255, 255, 255, 0.75);
611
}
JavaScript
1
72
72
1
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
2
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js">
3
</script>
4
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/ngLocalStorage.js">
5
</script>
6
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
7
</link>
8
<div ng-app="TodoApp" ng-controller="TodoController" class="task-list _wrap centered max-width text-center-h ng-scope"style="font-family: Arial, sans-serif;">
9
<h1 style="font-family: Arial, sans-serif;">Notes:</h1>
10
<div class="block-justify" style="position: relative; left: -153px; top: -14px;">
11
<div class="totals _wrap text-left">
12
<div class="totals _detail">
13
14
15
</div>
16
</div>
17
<div class="search _wrap text-right">
18
<input class="input -text -search" type="text" placeholder="Search tasks" ng-model="taskSearch.name" />
19
<i class="fa fa-search"></i>
20
</div>
21
</div>
22
23
<form class="add-form _wrap block text-left">
24
<input class="input -text -add-task" type="text" placeholder="Add a new task" ng-model="taskInput.name" ng-model-instant />
25
<div class="add-form _buttons text-right">
26
<p>Priority</p>
27
<div class="add-form _checkbox-wrap">
28
<label class="add-form _checkbox"><input class="input -checkbox" type="checkbox" name="priority"
29
ng-model="taskInput.priority" ng-init="checked=false" parse-int ng-true-value="1"
30
ng-false-value="0"></i></label>
31
</div>
32
<button class="add-form _submit-button btn -add" ng-click="todoAdd()" style="position: relative; left: 18px; top: -3px; height: 47px; transform-origin: 50% 78%;">Add</button>
33
</div>
34
</form>
35
36
<ul class="list-no-style text-left">
37
<li ng-repeat="task in tasksActive | filter:taskSearch.name | orderBy:'-priority'"
38
class="task _item -done-{{ task.complete }} -task-priority-{{ task.priority==true ? 'high' : 'low' }} block-table">
39
<div class="task _task-left" ;>
40
<p id="myText" contenteditable class="changed"
41
ng-on-blur="contentEdit($event, task)"
42
ng-bind-html="task.text"></p>
43
</div>
44
<div class="task _task-right text-right">
45
<a href ng-click="togglePriority(task)" class="btn -task-action -priority"
46
title="Change priority"><i class="fa fa-exclamation"></i></a>
47
<a href ng-click="completeTask(task)" class="btn -task-action -complete" title="Complete"><i
48
class="fa fa-check"></i></a>
49
<a href ng-click="deleteTask(task,'active')" class="btn -clear" title="Delete"><i
50
class="fa fa-times-circle"></i></a>
51
52
</div>
53
</li>
54
<li ng-repeat="task in tasksComplete | filter:taskSearch.name"
55
class="task _item -done-{{ task.complete }} block">
56
<p style="white-space: pre-wrap;" class="task _task-left">{{ task.text }}</p>
57
<div class="task _task-right text-right">
58
<a href ng-click="uncompleteTask(task)" class="btn -task-action -re-open" title="Re-open"><i
59
class="fa fa-undo"></i></a>
60
<a href ng-click="deleteTask(task,'complete')" class="btn -clear" title="Delete"><i
61
class="fa fa-times-circle"></i></a>
62
</div>
63
</li>
64
</ul>
65
66
<form class="text-right">
67
<button class="btn -clear" ng-show="tasksComplete.length" ng-click="clearCompleted()">Delete all
68
completed</button>
69
</form>
70
</div>
71
72
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.8.0/angular-sanitize.min.js"></script>
Advertisement
Answer
Use this:
JavaScript
1
7
1
$scope.contentEdit = function (event, task) {
2
const newText = event.target.innertHTML;
3
if (newText && task) {
4
task.text = newText;
5
}
6
}
7
Change innerText to innerHTML. https://jsfiddle.net/3uvfjdew/