AngularJS日程表案例详解


Posted in Javascript onAugust 15, 2017

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

<!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日程表案例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
js表单验证实例讲解
Mar 31 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
jQuery实现菜单栏导航效果
Aug 15 #jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 #Javascript
JScript实现地址选择功能
Aug 15 #Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 #jQuery
关于vue.js发布后路径引用的问题解决
Aug 15 #Javascript
JavaScript中使用Async实现异步控制
Aug 15 #Javascript
使用jQuery实现购物车结算功能
Aug 15 #jQuery
You might like
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHP基础知识回顾
2012/08/16 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
详解原生JS动态添加和删除类
2019/03/26 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
Python字符串处理函数简明总结
2015/04/13 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
.NET面试10题
2014/02/24 面试题
数控技术专业推荐信
2013/11/01 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
毕业设计致谢语
2015/05/14 职场文书
教师节班会主持词
2015/07/06 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers