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 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
JS如何生成动态列表
Sep 22 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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
thinkphp模板输出技巧汇总
2014/11/24 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
python实现端口转发器的方法
2015/03/13 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python版大富翁源代码分享
2018/11/19 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
python实现PCA降维的示例详解
2020/02/24 Python
python实现计算器简易版
2020/12/17 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
环保建议书600字
2014/05/14 职场文书
介绍信格式样本
2015/05/05 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL