将要计划完成事的列表存在localStroage ,实现本地同步删除,同步增加。
<!DOCTYPE html>
<html lang="zh" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
<title>angularjs todolist简单实现</title>
</head>
<body ng-cloak style="padding:10px">
<div ng-controller="myCtrl">
<div class="alert-box alert" ng-hide="alertMessage">请填写信息</div>
<input class="small-8"" type="text" ng-model="msg" ng-keyup="enterEvent($event)">
<button class="tiny small-3"" ng-click="addClick()">添加</button>
<h5 ng-show="lists.length>0">今天要做的事</h5>
<ul>
<li ng-repeat="item in lists track by $index">{{item}} <a ng-click="delClick($index)">删除</a></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
<script>
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.msg = "";
$scope.lists = localStorage.getItem('todolist')? localStorage.getItem('todolist').split(','):[];
$scope.alertMessage = true;
$scope.addClick = function() {
if($scope.msg == ""){
$scope.alertMessage = false;
} else{
$scope.alertMessage = true;
$scope.lists.push($scope.msg);
localStorage.setItem('todolist', $scope.lists)
}
$scope.msg = "";
};
$scope.delClick = function($index) {
$scope.lists.splice($index,1);
var bsaveStr = localStorage.getItem('todolist');
var bsaveArr = bsaveStr.split(',');
bsaveArr.splice($index,1);
localStorage.setItem('todolist',bsaveArr);
};
$scope.enterEvent = function(e) {
if(e.keyCode == 13){
$scope.addClick();
}
};
})
</script>
</body>
</html>