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 相关文章推荐
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
原生js实现放大镜效果
Jan 11 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
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 错误之引号中使用变量
2009/05/04 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
如何理解Python中包的引入
2020/05/29 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
服装厂厂长职责
2013/12/16 职场文书
《称象》教学反思
2014/04/25 职场文书
爱护公物标语
2014/06/24 职场文书
擅自离岗检讨书
2014/09/12 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
甲午大海战观后感
2015/06/02 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js