AngularJS小案例:日程表-优快云博客

本文介绍了一个基于Angular框架的简单待办事项应用程序。该程序允许用户添加、完成及删除待办事项，并将这些事项分为未完成和已完成两个部分进行展示。通过使用Angular的数据绑定特性，使得操作界面更加直观和方便。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能:添加事件/完成事件/删除事件

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         .note{
 12             margin:0 auto;
 13             background: orange;
 14             color: orange;
 15             width: 400px;
 16             padding:2px 2px;
 17         }
 18         .input{
 19             text-align: center;
 20         }
 21         h1{
 22             text-align: center;
 23             color:#fff;
 24             padding:10px 10px;
 25         }
 26         h5{
 27             color: #fff;
 28             text-align: left;
 29             padding-left: 10px;
 30         }
 31         textarea{
 32             width: 300px;
 33             height: 58px;
 34             resize: none;
 35             border:1px solid orange;
 36         }
 37         button{
 38             width: 80px;
 39             height: 58px;
 40             outline: none;
 41             background: orange;
 42             font-size: 24px;
 43             border:3px solid #fff;
 44             position: relative;
 45             top:-22px;
 46             color: #fff;
 47         }
 48         ul li{
 49             margin:0 auto;
 50             width: 380px;
 51             background: #fff;
 52             list-style: none;
 53             line-height:18px;
 54             padding:2px;
 55             margin-bottom:2px;
 56         }
 57         .delbtn{
 58             background: skyblue;
 59             border:none;
 60             float: right;
 61             line-height:14px;
 62             color: #fff;
 63             padding:2px 6px;
 64         }
 65         .done label{
 66             text-decoration:line-through ;
 67         }
 68     </style>
 69 </head>
 70 <body ng-app="demo">
 71     <div class="note" ng-controller='democontroller'>
 72         <h1>NOTE</h1>
 73         <div class="input">
 74             <textarea name="" id="" cols="30" rows="10" ng-model="text"></textarea><button ng-click="add()">提交</button>
 75         </div>
 76         <div class="todo">
 77             <h5>未完成:{{todos.length}}</h5>
 78             <ul>
 79                 <li ng-repeat="todo in todos">
 80                     <form>
 81                         <input type="radio" id="redio" ng-checked="{{todo.checked}}" ng-click="doit($index)">
 82                         <label for="redio">{{todo.text}}</label>
 83                         <input type="button" value="删除" class="delbtn" ng-click="del($index,todos)">
 84                     </form>
 85                 </li>
 86             </ul>
 87         </div>
 88         <div class="done">
 89             <h5>已完成:{{dones.length}}</h5>
 90             <ul>
 91                 <li ng-repeat="done in dones">
 92                     <form>
 93                         <input type="radio" id="redio" ng-checked="{{done.checked}}" ng-click="notdoit($index)">
 94                         <label for="redio">{{done.text}}</label>
 95                         <input type="button" value="删除" class="delbtn" ng-click="del($index,dones)">
 96                     </form>
 97                 </li>
 98             </ul>
 99         </div>
100     </div>
101     <script src="angular.min.js"></script>
102     <script>
103         var demo=angular.module('demo',[]);
104         demo.controller('democontroller',function($scope){
105             $scope.todos=[];
106             $scope.dones=[];
107             $scope.add=function(){
108                 $scope.todos.push({
109                     checked:false,
110                     text:$scope.text
111                 });
112                 $scope.text='';//清空文本框
113                 console.log($scope.todos.length);
114             }
115             $scope.doit=function(index){
116                 var str=$scope.todos.splice(index,1)[0];
117                 str.checked=true;
118                 $scope.dones.push(str);
119             }
120             $scope.notdoit=function(index){
121                 var str=$scope.dones.splice(index,1)[0];
122                 str.checked=false;
123                 $scope.todos.push(str);
124             }
125             $scope.del=function(index,arr){
126                 arr.splice(index,1);
127             }
128         });
129     </script>
130 </body>
131 </html>