zbu*_*548 7 html javascript angularjs
当我尝试将其扩展为包含 contentEditable 时，本地存储停止工作。当我尝试将其扩展为包含 contentEditable 时，本地存储停止工作。以下是 CodePen 的链接：https ://codepen.io/zanderbush/pen/WNwWbWe 。任何帮助表示赞赏。
单独，这是有效的。
var app = angular.module('TodoApp', ["LocalStorageModule"]);
app.controller('TodoController', function($scope, localStorageService) {
if (!localStorageService.get("taskListActive")) {
$scope.tasksActive = [
{
text: "Do me next",
priority: 1,
complete: false
},
{
text: "I'm not important",
priority: 0,
complete: false
}
];
} else {
$scope.tasksActive = localStorageService.get("taskListActive");
}
if (!localStorageService.get("taskListComplete")) {
$scope.tasksComplete = [
{
text: "I'm already done",
priority: 0,
complete: true
}
];
} else {
$scope.tasksComplete = localStorageService.get("taskListComplete");
}
$scope.totalTasks = function() {
console.log($scope.tasksComplete.length)
return $scope.tasksActive.length + $scope.tasksComplete.length;
}
$scope.totalRemaining = function() {
return $scope.tasksActive.length;
};
$scope.totalComplete = function() {
return $scope.tasksActive.length;
};
$scope.todoAdd = function() {
if ($scope.taskInput.name) {
$scope.tasksActive.unshift({ text:$scope.taskInput.name, priority:$scope.taskInput.priority || 0, complete:false});
$scope.taskInput.name = '';
$scope.taskInput.priority = 0;
}
};
$scope.togglePriority = function(task) {
if( task.priority === 0 ) {
task.priority = 1;
console.log('a')
} else {
task.priority = 0;
}
};
$scope.completeTask = function(task) {
//var task = $scope.tasksActive[index];
task.complete = true;
task.priority = 0;
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
$scope.tasksComplete.unshift(task);
};
$scope.uncompleteTask = function(task) {
task.complete = false;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
$scope.tasksActive.unshift(task);
};
$scope.deleteTask = function(task,list) {
if( list == "active" ) {
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
} else {
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
}
};
$scope.clearCompleted = function () {
var deleteArr= [];
for (var i = 0; i < $scope.tasksComplete.length; i++) deleteArr.push(i);
for (var i = 0; i < deleteArr.length; i++) {
var task = i;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task) - 1, 1);
}
};
$scope.$watch("tasksActive",function (newVal,oldVal) {
if (newVal !== null && angular.isDefined(newVal) && newVal!==oldVal) {
localStorageService.add("taskListActive",angular.toJson(newVal));
}
},true);
$scope.$watch("tasksComplete",function (newVal,oldVal) {
if (newVal !== null && angular.isDefined(newVal) && newVal!==oldVal) {
localStorageService.add("taskListComplete",angular.toJson(newVal));
}
},true);
});
但是，当我添加以下代码以适应 contentEditable 时，两者都不起作用。
var text = document.getElementById('myText');
var myData;
var postData = window.localStorage.getItem("save");
var reset = text.innerHTML;
// if no data
if (postData == null || postData == '') {
myData = text.innerHTML;
// store default value
window.localStorage.setItem("save", myData);
// make it placeholder style
text.classList.remove('changed');
} else {
// if there is a value post it
text.innerHTML = postData;
// make dark text
text.classList.add('changed');
}
function saveChanges() {
// store the current value
myData = text.innerHTML;
// local store the value
window.localStorage.setItem("save", myData);
text.classList.add('changed');
}
function clearStorage() {
text.classList.remove('changed');
// clear storage
window.localStorage.clear("save");
// return to default text
text.innerHTML = reset;
}
更新：我刚刚找到了这段代码来模拟我的，但我似乎无法实现它。当我这样做时，我无法再添加任务。
var appx = angular.module('mainApp',[]);
appx.controller('app',function($scope) {
$scope.tasks = [];
var taskData = localStorage['tasksList'];
if(taskData !== undefined){
$scope.tasks = JSON.parse(taskData);
}
$scope.searchEnter = function(event) {
//console.log(event.keyCode);
if(event.which==13 && $scope.task!=''){
$scope.addTask();
}
};
$scope.addTask=function(event){
$scope.tasks.push({'taskmsg':$scope.task, 'status':false});
//console.log($scope.task);
$scope.task='';
localStorage['tasksList']=JSON.stringify($scope.tasks);
};
$scope.editContent=function(event,mm){
console.log(mm);
for(i=0;i<$scope.tasks.length;i++){
if($scope.tasks[i].taskmsg==mm){
console.log(i);
$scope.tasks[i].taskmsg=event.target.innerText;
}
}
event.target.contentEditable = event.target.contentEditable == "false" ? "true" : "false";
localStorage['tasksList']=JSON.stringify($scope.tasks);
//event.target.contentEditable = event.target.contentEditable == "false" ? "true" : "false";
};
$scope.enter=function(event,msg){
if(event.which==13 && msg!=''){
//console.log('asd');
$scope.editContent(msg);
}
///console.log('wq');
}
$scope.delfield=function(mm){
console.log("2");
for(i=0;i<$scope.tasks.length;i++){
if($scope.tasks[i].taskmsg==mm){
console.log(mm);
console.log(localStorage['tasksList']);
$scope.tasks.splice(i,1);
localStorage['tasksList']=JSON.stringify($scope.tasks);
}
}
}
$scope.sort=function(){
console.log("sort");
}
});
提供的代码示例存在多个问题，我无法修复所有逻辑错误，因为我不完全了解该功能，但我确实更改了一些内容，现在编辑contentEditable项目正在正确更新。
现在来看看我所做的改变，有几个至关重要：
p在元素
上添加模糊事件监听器<p id="myText" contentEditable class="changed" ng-on-blur="contentEdit($event, task)">
{{ task.text }}
</p>
contentEdit方法，因为它有很多我认为没有必要的代码，因为我们已经可以参考task并且$watch已经在监视更改和保存到本地存储方面进行了繁重的工作
$scope.contentEdit = function (event, task) {
const newText = event.target.innerText;
if (newText && task) {
task.text = newText;
console.log(event.target.innerText);
}
}
另外，我不确定附加的 JS 文件的确切用途是什么，但如果你能进一步解释一下，我可以看一下。最后，看一下更新后的代码，我已将 SCSS 更新为 CSS 但我没有更改任何内容：
<p id="myText" contentEditable class="changed" ng-on-blur="contentEdit($event, task)">
{{ task.text }}
</p>
$scope.contentEdit = function (event, task) {
const newText = event.target.innerText;
if (newText && task) {
task.text = newText;
console.log(event.target.innerText);
}
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js">
</script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/ngLocalStorage.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</link>
<div ng-app="TodoApp" ng-controller="TodoController" class="task-list _wrap centered max-width text-center-h">
<h1>Notes:</h1>
<div class="block-justify" style="position: relative; left: -153px; top: -14px;">
<div class="totals _wrap text-left">
<div class="totals _detail">
</div>
</div>
<div class="search _wrap text-right">
<input class="input -text -search" type="text" placeholder="Search tasks" ng-model="taskSearch.name" />
<i class="fa fa-search"></i>
</div>
</div>
<form class="add-form _wrap block text-left">
<input class="input -text -add-task" type="text" placeholder="Add a new task" ng-model="taskInput.name" ng-model-instant />
<div class="add-form _buttons text-right">
<p>Priority</p>
<div class="add-form _checkbox-wrap">
<label class="add-form _checkbox"><input class="input -checkbox" type="checkbox" name="priority"
ng-model="taskInput.priority" ng-init="checked=false" parse-int ng-true-value="1"
ng-false-value="0"><i class="fa fa-exclamation -clickable"></i></label>
</div>
<button class="add-form _submit-button btn -add" ng-click="todoAdd()">Add</button>
</div>
</form>
<ul class="list-no-style text-left">
<li ng-repeat="task in tasksActive | filter:taskSearch.name | orderBy:'-priority'" class="task _item -done-{{ task.complete }} -task-priority-{{ task.priority==true ? 'high' : 'low' }} block-table">
<div class="task _task-left" ;>
<p id="myText" contentEditable class="changed" ng-on-blur="contentEdit($event, task)">
{{ task.text }}
</p>
</div>
<div class="task _task-right text-right">
<a href ng-click="togglePriority(task)" class="btn -task-action -priority" title="Change priority"><i class="fa fa-exclamation"></i></a>
<a href ng-click="completeTask(task)" class="btn -task-action -complete" title="Complete"><i
class="fa fa-check"></i></a>
<a href ng-click="deleteTask(task,'active')" class="btn -clear" title="Delete"><i
class="fa fa-times-circle"></i></a>
</div>
</li>
<li ng-repeat="task in tasksComplete | filter:taskSearch.name" class="task _item -done-{{ task.complete }} block">
<p class="task _task-left">{{ task.text }}</p>
<div class="task _task-right text-right">
<a href ng-click="uncompleteTask(task)" class="btn -task-action -re-open" title="Re-open"><i
class="fa fa-undo"></i></a>
<a href ng-click="deleteTask(task,'complete')" class="btn -clear" title="Delete"><i
class="fa fa-times-circle"></i></a>
</div>
</li>
</ul>
<form class="text-right">
<button class="btn -clear" ng-show="tasksComplete.length" ng-click="clearCompleted()">Delete all
completed</button>
<