【前端demo】使用AngularJS完成SAP：笔记+备忘录

最新推荐文章于 2021-06-03 17:15:19 发布

Elylicery

最新推荐文章于 2021-06-03 17:15:19 发布

阅读量202

点赞数

分类专栏：前端demo 文章标签： javascript js angularjs html

本文链接：https://blog.csdn.net/sinat_38368658/article/details/106751569

版权

前端demo 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果展示

在这里插入图片描述

源代码

note.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mynote</title>
    <style>
        textarea{
            resize: none;
        }
    </style>
</head>
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <h2>我的笔记</h2>
        <textarea cols="30" rows="10" ng-model="message">
        </textarea>
        <div>
            <button ng-click="save()">保存</button>
            <button ng-click="read()">读取</button>
            <button ng-click="remove()">删除</button>
        </div>
        <p>剩余的字数:{{getCount()}}</p>
    </div>
    <div ng-controller="MyCtrl2">
        <h2>备忘录</h2>
        <div>
            <input type="text" ng-model="newItem">
            <button ng-click="add()">添加</button>
        </div>
        <div ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.isChecked">
            <span>{{todo.name}}</span><br/>
        </div>
        <div>
            <button ng-click="del()">删除选中的记录</button>
        </div>

    </div>
    

<script type="text/javascript" src="../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>

</body>
</html>

app.js

angular.module('myApp',[])
    .controller('MyCtrl',['$scope',function($scope){
        
        //初始化message数据
        $scope.message = '';

        //计算剩余字数的方法
        $scope.getCount = function(){
            //判断用户输入的内容长度
            if($scope.message.length>100){
                $scope.message =  $scope.message.slice(0,100);
            }
            return 100 - $scope.message.length;
        };
        //定义保存数据的方法
        $scope.save = function(){
            alert("note is saved !");
            localStorage.setItem('my-data',JSON.stringify($scope.message));
            $scope.message = "";
        };
        //定义读取数据的方法
        $scope.read = function(){
            $scope.message = JSON.parse(localStorage.getItem('my-data')||'[]');//如果没有值则取到null,要处理null的情况
        };
        //定义删除数据的方法
        $scope.remove = function(){
            localStorage.removeItem('my-data');
            $scope.message = '';
        }
    }])
    .controller('MyCtrl2',['$scope',function($scope){
        $scope.todos = [
            {name:'吃饭1',isChecked:false},
            {name:'吃饭2',isChecked:false},
            {name:'吃饭3',isChecked:false},
        ]


        //定义添加的方法
        $scope.add = function(){
            //判断用户输入的内容是否合法
            if(!$scope.newItem){
                alert('输入的内容不能为空');
                return;
            }
            //收集整理数据
            var obj={
                name:$scope.newItem,
                isChecked:false
            }
            $scope.todos.push(obj);
            $scope.newItem='';
        };

        //定义删除的方法
        // $scope.del = function(){
        //     $scope.todos.forEach(function(item,index){
        //         //找的选中的todo
        //         if(item.isChecked){
        //             $scope.todos.splice(index,1);
        //             $scope.del();//递归
        //         }
        //     })
        // }

        $scope.del = function(){
            var oldTodos = $scope.todos;
            $scope.todos = [];
            oldTodos.forEach(function(item,index) {
                if(!item.isChecked){
                    $scope.todos.push(item);
                }
            })
        }
    }]);

Elylicery

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端demo】使用AngularJS完成SAP：笔记+备忘录

效果展示源代码note.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mynote</title> <style>
复制链接

扫一扫

专栏目录