首页 > 其他 > 详细

angular1.x todolist 实现

时间:2019-03-23 15:51:51      阅读:127      评论:0      收藏:0      [点我收藏+]

将要计划完成事的列表存在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>

 

angular1.x todolist 实现

原文:https://www.cnblogs.com/wrongcode/p/10583961.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!