AngularJS日程表案例详解
程序员文章站
2022-04-29 08:01:44
功能:添加事件/完成事件/删除事件
...
功能:添加事件/完成事件/删除事件
<!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">
<div class="note" ng-controller='democontroller'>
<h1>note</h1>
<div class="input">
<textarea name="" id="" cols="30" rows="10" ng-model="text"></textarea><button ng-click="add()">提交</button>
</div>
<div 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)">
<label for="redio">{{todo.text}}</label>
<input type="button" value="删除" class="delbtn" ng-click="del($index,todos)">
</form>
</li>
</ul>
</div>
<div 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)">
<label for="redio">{{done.text}}</label>
<input type="button" value="删除" class="delbtn" ng-click="del($index,dones)">
</form>
</li>
</ul>
</div>
</div>
<script src="angular.min.js"></script>
<script>
var demo=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){
var str=$scope.todos.splice(index,1)[0];
str.checked=true;
$scope.dones.push(str);
}
$scope.notdoit=function(index){
var str=$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日程表案例详解，希望对大家有所帮助
上一篇： Vue学习笔记之表单输入控件绑定