angular1.x todolist 实现
将要计划完成事的列表存在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>