Angular实现“我的笔记本”

最新推荐文章于 2023-12-29 10:46:03 发布

Katle

最新推荐文章于 2023-12-29 10:46:03 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/qq_41096610/article/details/102469723

版权

利用angular实现简单的个人笔记本功能，，代码如下：
我的笔记.html

<body ng-app="noteApp">
  <div  ng-controller="NoteController">
     <h2>我的笔记</h2>
    <textarea cols="30" rows="10" ng-model="message"></textarea>
    <div>
      <button ng-click="save()" l>保存</button>
      <button ng-click="read()">读取</button>
      <button ng-click="remove()">删除</button>
    </div>
    <p>剩余字数:{{getCount()}}</p>
  </div>

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

app.js

angular.module('noteApp',[])
      .controller('NoteController',['$scope',function (a) {
            //初始化message数据
            a.message = ''
            //计算剩余字数方法
            a.getCount = function () {
              //判断用户输入的内容长度
              if (a.message.length>100) {
                 a.message = a.message.slice(0,100)     //截取0到100的内容显示
              }
                   return 100- a.message.length;
            }
            a.save = function () {
              alert('note is saved')
              localStorage.setItem('note-key',JSON.stringify(a.message))  //JSON.stringify  转换成JSON语句保存
              a.message=''
            }
            a.read = function () {
              console.log(localStorage.getItem('note-key'))
              a.message = JSON.parse(localStorage.getItem('note-key')||'[]')  //处理null    JSON.parse 将JSON语句转换成文本显示
            }
            a.remove = function () {
              localStorage.removeItem('note-key')
              a.message = ''

            }
      }])

页面效果：
在这里插入图片描述