zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    构造无限级树并深度遍历查找指定节点
    如何用python自动编写《赤壁赋》文档
    《易经》总结
    IDEA看代码必备插件Call Graph 介绍及使用方法
    chemfig化学式转换为pdf
    从wav到Ogg Opus 以及使用java解码OPUS
    使用jhipster 加速java web开发
    从Spring框架看设计模式如何灵活使用
    提升NginxTLS/SSL HTTPS 性能的7条优化建议
    高效团队的gitlab flow最佳实践
  • 原文地址:https://www.cnblogs.com/wrongcode/p/10583961.html
Copyright © 2011-2022 走看看