明霞山资源网 Design By www.htccd.com
功能:添加事件/完成事件/删除事件
<!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="/UploadFiles/2021-04-02/angular.min.js">
总结
以上所述是小编给大家介绍的AngularJS日程表案例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
angularjs,日程表
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。