原创投稿
广告
广告
广告 广告 广告 广告
广告
广告 国内BGP机房32G内存299元 网站收录排名问题解决 【超牛】搜外友链平台 站长在线扒站工具【免费】 【免费】站长开发工具箱 【推荐】站长自动外链工具 广告位联系QQ：253000106 独立服务器100M/不限/免备 2核2G服务器新用户低至68元/年 虚拟资源平台,轻松变现 10000来路IP只需8元 站群系统程序-专注SEO站群 黑帽SEO论坛_黑帽聚集地 企业HTTP代理IP服务提供商 软文推广，在线获客【定制】 站群服务器99元起 SEO免费工具分享 外推代发包收录 【国内国际】短信推广，免费测试 实力产品收量 外链代发 5分一条 快速排名 █一解决“收录、排名”问题一█ ●●●优质搜狗泛收录域名●●● AI数字人直播系统源码 百度SEO排名7-15天上首页
  1. 创想鸟首页
  2. 站长之家
  3. 编程技术

AngularJS实现日程表

PHP中文网 • • 编程技术 • 阅读 2

这次给大家带来AngularJS实现日程表，AngularJS实现日程表的注意事项有哪些，下面就是实战案例，一起来看一下。

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

    Document      *{      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 ;    }    
    
NOTE
    
          
    
      
未完成:{{todos.length}}
      
            
  •                                   {{todo.text}}                              
    •       
    
    
      
已完成:{{dones.length}}
      
            
  •                                   {{done.text}}                              
    •       
    
  
        vardemo=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){        varstr=$scope.todos.splice(index,1)[0];        str.checked=true;        $scope.dones.push(str);      }      $scope.notdoit=function(index){        varstr=$scope.dones.splice(index,1)[0];        str.checked=false;        $scope.todos.push(str);      }      $scope.del=function(index,arr){        arr.splice(index,1);      }    });

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

vue实现点击图片放大功能（附代码）

input输入框内容实时获取

JS单双引号嵌套使用详解

以上就是AngularJS实现日程表的详细内容，更多请关注【创想鸟】其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2770697.html

赞 (0)
0 0

关于作者

PHP中文网的头像

PHP中文网签约作者

437.6K 文章
0 评论
1 粉丝
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
上一篇 2025年3月8日 12:40:19
下一篇 2025年2月25日 10:11:18

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js操作表格

    这次给大家带来js操作表格，js操作表格的注意事项有哪些，下面就是实战案例，一起来看一下。 实现思路： 1、添加时：获取当前列表的行数，在当前一行添加下一行；2、用insertCell()方法添加一行，下标从0开始，3、若要给新一行添加类型…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    100

  • JS操作input标签内数值计算

    这次给大家带来，的注意事项有哪些，下面就是实战案例，一起来看一下。 nbsp;html>window.onload=function(){var oIput1=document.getElementById('put1&#0…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • JS做出地址选择功能

    这次给大家带来JS做出地址选择功能，JS做出地址选择功能的注意事项有哪些，下面就是实战案例，一起来看一下。         var shenArr = new Array(5); shenArr[“广东”] = [“广州”,”深圳”,”韶关…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • vue.js发布后引用路径详解

    这次给大家带来vue.js发布后引用路径详解，vue.js发布后引用路径的注意事项有哪些，下面就是实战案例，一起来看一下。 在发布到iis目录下时候，如果放在网站的根目录下的时候，是不会有什么问题的 但是一旦放在了非根目录的其他文件夹里面，…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • JS的兼容性使用方法

    这次给大家带来JS的兼容性使用方法，JS兼容性使用的注意事项有哪些，下面就是实战案例，一起来看一下。 1.事件冒泡: //取消冒泡 if(e.stopPropagation){ e.stopPropagation();//w3c定义的API…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • js数字滑动时钟步奏详解

    这次给大家带来js数字滑动时钟步奏详解，实现js数字滑动时钟的注意事项有哪些，下面就是实战案例，一起来看一下。 Document body,ul{margin:0;padding: 0;} .content{margin:100px aut…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • AngularJS做出购物车全选反选功能

    这次给大家带来AngularJS做出购物车全选反选功能，AngularJS做出购物车全选反选功能的注意事项有哪些，下面就是实战案例，一起来看一下。 刚学习angularJS，于是练习写了一个类似于购物车的全选/取消全选的功能，主要实现的功能…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • JS实现飘落星星动画效果

    这次给大家带来JS实现飘落星星动画效果，JS实现飘落星星动画效果的注意事项有哪些，下面就是实战案例，一起来看一下。 Title img{ position: absolute; } body { background-image: url(…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • 提高Node.js性能方法总结

    这次给大家带来提高Node.js性能方法总结，提高Node.js性能的注意事项有哪些，下面就是实战案例，一起来看一下。 Node.js 是单线程非阻塞 I/O, 使其可以支持成千上万的并发操作。这和 NGINX 解决 C10K 问题的方式如…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • JS实现下拉菜单登录注册弹窗

    这次给大家带来JS实现下拉菜单登录注册弹窗，JS实现下拉菜单登录注册弹窗的注意事项有哪些，下面就是实战案例，一起来看一下。 下拉菜单列表 *{ margin: 0px; padding: 0px; } .menu{ width: 1100p…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

发表回复

登录后才能评论

请登录

您还未登录，请登录后再进行相关操作！

登录 注册