AngularJS实现日程表

来源：喜迪情感

这次给大家带来AngularJS实现日程表，AngularJS实现日程表的注意事项有哪些，下面就是实战案例，一起来看一下。

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 .note{
 margin:0 auto;
 background: orange;
 color: orange;
 width: 400px;
 padding:2px 2px;
 }
 .input{
 text-align: center;
 }
 h1{
 text-align: center;
 color:#fff;
 padding:10px 10px;
 }
 h5{
 color:#fff;
 text-align: left;
 padding-left: 10px;
 }
 textarea{
 width: 300px;
 height: 58px;
 resize: none;
 border:1px solid orange;
 }
 button{
 width: 80px;
 height: 58px;
 outline: none;
 background: orange;
 font-size: 24px;
 border:3px solid#fff;
 position: relative;
 top:-22px;
 color:#fff;
 }
 ul li{
 margin:0 auto;
 width: 380px;
 background:#fff;
 list-style: none;
 line-height:18px;
 padding:2px;
 margin-bottom:2px;
 }
 .delbtn{
 background: skyblue;
 border:none;
 float: right;
 line-height:14px;
 color:#fff;
 padding:2px 6px;
 }
 .done label{
 text-decoration:line-through ;
 }
 </style>
</head>
<body ng-app="demo">
 <p class="note"ng-controller='democontroller'>
 <h1>NOTE</h1>
 <p class="input">
 <textarea name=""id=""cols="30"rows="10"ng-model="text"></textarea><button ng-click="add()">提交</button>
 </p>
 <p class="todo">
 <h5>未完成:{{todos.length}}</h5>
 <ul>
 <li ng-repeat="todo in todos">
 <form>
 <input type="radio"id="redio"ng-checked="{{todo.checked}}"ng-click="doit($index)">
 <labelfor="redio">{{todo.text}}</label>
 <input type="button"value="删除"class="delbtn"ng-click="del($index,todos)">
 </form>
 </li>
 </ul>
 </p>
 <p class="done">
 <h5>已完成:{{dones.length}}</h5>
 <ul>
 <li ng-repeat="done in dones">
 <form>
 <input type="radio"id="redio"ng-checked="{{done.checked}}"ng-click="notdoit($index)">
 <labelfor="redio">{{done.text}}</label>
 <input type="button"value="删除"class="delbtn"ng-click="del($index,dones)">
 </form>
 </li>
 </ul>
 </p>
 </p>
 <script src="angular.min.js"></script>
 <script>
 vardemo=angular.module('demo',[]);
 demo.controller('democontroller',function($scope){
 $scope.todos=[];
 $scope.dones=[];
 $scope.add=function(){
 $scope.todos.push({
 checked:false,
 text:$scope.text
 });
 $scope.text='';//清空文本框
 console.log($scope.todos.length);
 }
 $scope.doit=function(index){
 varstr=$scope.todos.splice(index,1)[0];
 str.checked=true;
 $scope.dones.push(str);
 }
 $scope.notdoit=function(index){
 varstr=$scope.dones.splice(index,1)[0];
 str.checked=false;
 $scope.todos.push(str);
 }
 $scope.del=function(index,arr){
 arr.splice(index,1);
 }
 });
 </script>
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！