AngularJs实例——备忘录

最新推荐文章于 2020-11-29 04:37:01 发布

Alice9969

最新推荐文章于 2020-11-29 04:37:01 发布

阅读量389

点赞数

分类专栏： angular 文章标签： angular angular实例备忘录

本文链接：https://blog.csdn.net/Alice9969/article/details/80228519

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（复制粘贴即可使用）

（于“菜鸟教程”学完AngularJs，在它实例的基础上添加个人的想法。菜鸟教程实例网址：http://www.runoob.com/try/try.php?filename=try_ng_todo_app&basepath=0 ）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>备忘录</title>
    <style>
        div{
            margin-bottom: 15px;
        }
        .pullLeft{
            float: left;
        }
        .clearfix{
            clear: both;
            overflow: hidden;
            _zoom:1;
        }
        table td{
           padding: 5px;
        }
    </style>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ng-cloak>
    <div>时间：<input type="date" ng-model="infoTime" placeholder="请选择时间"></div>
    <div class="clearfix">
        <span class="pullLeft">内容：</span>
        <textarea class="pullLeft" cols="30" rows="10"  placeholder="请输入备忘内容" ng-model="infoText" maxlength="100"></textarea>
        <div class="clearfix">&emsp;&emsp;&emsp;<small>还可以输入&nbsp;<span ng-bind="WordNumFun()"></span>&nbsp;个字</small></div>

    </div>
    <div>
        <button type="button" ng-click="addInfo()" ng-show="AddInfoShow">添加至备忘录</button>
        <button type="button" ng-click="EditSave()" ng-show="EditSaveShow">保存修改</button>
        <span style="color: red">
          <strong ng-if="tipsShow" ng-bind="tipsShowFun()"></strong>
        </span>
    </div>
    <table>
        <tr ng-repeat="item in infoList | orderBy:'time' ">
            <td>{{$index + 1}}</td>
            <td><input type="checkbox" ng-model="item.done"></td>
            <td>
                <span ng-bind="item.time"></span>：
                <span ng-bind="item.text"></span>
            </td>
            <td>
                <button type="button" ng-click="editInfo($index)">修改记录</button>

            </td>
        </tr>
    </table>
    <button type="button" ng-if="deleteShow" ng-click="deleteInfo()">删除记录</button>
</div>


</body>


<script>
    angular.module('myApp',[]).controller('myCtrl', function ($scope) {
      $scope.infoList = [];
      $scope.deleteShow = false;
      $scope.infoTime = new Date();
      $scope.infoText = '';
      $scope.tipsShow = false;
      $scope.WordNum = 100;
      $scope.AddInfoShow=true;
      $scope.EditSaveShow = false;

      //清空输入内容
      $scope.clearContent = function(){
        $scope.infoText = '';
        $scope.infoTime = new Date();
      };

      //数字计算
      $scope.WordNumFun=function(){
        return $scope.WordNum - Number($scope.infoText.length);
      };

      //为空提示
      $scope.tipsShowFun = function(){
        if($scope.infoText.length !== 0){
           $scope.tipsShow = false;
        }else{
         $scope.tipsShow = true;
          return '请先填写内容，再添加 (*^▽^*)~~';
        }
      };

      //删除记录 按钮的显示隐藏
      $scope.deleteShowFun = function(){
        $scope.infoList.length == 0? $scope.deleteShow = false: $scope.deleteShow = true;
      };

      //时间格式转换:时间戳→具体时间
      var yyyy, mm, dd, times;
      $scope.timeFormat = function(){
        yyyy = $scope.infoTime.getFullYear();
        mm =(Number( $scope.infoTime.getMonth()) + 1) < 10 ? '0'+(Number( $scope.infoTime.getMonth()) + 1): (Number( $scope.infoTime.getMonth()) + 1);
        dd = ($scope.infoTime.getDate()) < 10 ? '0'+($scope.infoTime.getDate()):($scope.infoTime.getDate());
        times = yyyy+'-'+mm+'-'+dd;
      };

      //时间格式转换: 具体时间→时间戳
      $scope.dateFormat = function(date){
        $scope.infoTime = new Date(date);
      };

      //添加至备忘录
      $scope.addInfo = function () {
        if($scope.infoText.length !== 0){
          $scope.timeFormat();
          $scope.infoList.push({done: false, time: times, text: $scope.infoText});
          $scope.deleteShowFun();
          $scope.clearContent();
        }
        else{
          return $scope.tipsShow = true;
        }
      };

      //删除记录
      $scope.deleteInfo = function () {
        for(var i = $scope.infoList.length - 1; i >= 0; i--){
          if( $scope.infoList[i].done ==true){
            $scope.infoList.splice(i, 1);
          }
        }
        $scope.deleteShowFun();
      };

      //修改记录
      var EditId;
      $scope.editInfo = function (data) {
        EditId = data;
        $scope.infoText = $scope.infoList[data].text;
        $scope.dateFormat($scope.infoList[data].time);
        $scope.AddInfoShow=false;
        $scope.EditSaveShow = true;
      };

      //保存修改
      $scope.EditSave = function () {
        $scope.infoList[EditId].text = $scope.infoText;
        $scope.timeFormat();
        $scope.infoList[EditId].time =  times;
        $scope.AddInfoShow=true;
        $scope.EditSaveShow = false;
        $scope.clearContent();
      };


    })
</script>

</html>

Alice9969

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs实例——备忘录

（复制粘贴即可使用）（于“菜鸟教程”学完AngularJs，在它实例的基础上添加个人的想法。菜鸟教程实例网址：http://www.runoob.com/try/try.php?filename=try_ng_todo_app&amp;basepath=0 ）&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset...
复制链接

扫一扫