AngularJS日程表案例详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS日程表案例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2470字，纯文字阅读大概需要4分钟。
内容图文
功能:添加事件/完成事件/删除事件
<!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日程表案例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
内容总结
以上是互联网集市为您收集整理的AngularJS日程表案例详解全部内容，希望文章能够帮你解决AngularJS日程表案例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】