AngularJS实现日程表
程序员文章站
2022-05-10 13:55:16
...
这次给大家带来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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是AngularJS实现日程表的详细内容，更多请关注其它相关文章！