Angular实现的日程表功能【可添加及隐藏显示内容】

本文实例讲述了Angular实现的日程表功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net Angular日程表</title>
  <style>
    table{
      border-collapse: collapse;
    }
    td{
      padding: 10px;
      border: 1px solid #000;
    }
  </style>
  <script src="angular.min.js"></script>
  <script>
    /*
     1、基本布局
     2、准备模拟数据
     */
    // 模拟数据
    var data = {
      user:"吴四",
      items:[
        {action:"约刘诗诗吃饭",done:false},
        {action:"约刘诗诗跳舞",done:false},
        {action:"约刘诗诗敲代码",done:true},
        {action:"约刘诗诗爬长城",done:false},
        {action:"约刘诗诗逛天坛",done:false},
        {action:"约刘诗诗看电影",done:false}
      ]
    };
    var myapp=angular.module("myapp",[]);
    /*这里的是自定义过滤器，将数组items 过滤之后返回arr*/
    myapp.filter("doFilter",function(){
      /*传入两个参数，一个数组items，另一个是complate*/
      return function(items,flag){
        var arr=[];
        /*遍历items,如果dones是false或者下边的按钮在选中状态，就将这一条item push到arr中*/
        for(var i=0;i<items.length;i++){
          if(items[i].done==false){
            arr.push(items[i]);
          }else{
            if(flag==true){
              arr.push(items[i]);
            }
          }
        }
        return arr;
      }
    });
    myapp.controller("myCtrl",function($scope){
      $scope.data=data;
      $scope.complate=false;
      /*判断还有几件事儿没有完成*/
      $scope.count=function(){
        var n=0;
        /*判断还有几件事儿没有完成*/
        for(var i=0;i<$scope.data.items.length;i++){
          if($scope.data.items[i].done==false){
            n++;
          }
        }
        return n;
      };
      /*添加新的日程*/
      $scope.add=function(){
        /*对$scope.action进行一下非空判断*/
        if($scope.action){
          /*如果输入了内容之后，就在数组的最后加入一条新内容*/
          $scope.data.items.push({"action":$scope.action,"done":false});
          /*添加完成之后，将input置空*/
          $scope.action="";
        }
      };
    });
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>吴四的日程<span ng-bind="count()"></span></h2>
<div>
  <input type="text" ng-model="action"><button ng-click="add()">添加</button>
</div>
<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>日程</th>
    <th>完成情况</th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="item in data.items|doFilter:complate">
    <td>{{$index}}</td>
    <td>{{item.action}}</td>
    <td><input type="checkbox" ng-model="item.done"></td>
  </tr>
  </tbody>
</table>
<div>显示全部<input type="checkbox" ng-model="complate"></div>
</body>
</html>

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • angular-ui-sortable实现可拖拽排序列表
  • 使用angular帮你实现拖拽的示例
  • 基于AngularJS的拖拽文件上传的实例代码
  • Angular实现较为复杂的表格过滤，删除功能示例
  • AngularJS实现的根据数量与单价计算总价功能示例
  • Angular实现的简单定时器功能示例
  • Angular实现点击按钮控制隐藏和显示功能示例
  • Angular实现的敏感文字自动过滤与提示功能示例
  • AngularJS实现的锚点楼层跳转功能示例
  • AngularJS实现的简单拖拽功能示例
赞 (0)

相关推荐

  • Angular实现点击按钮控制隐藏和显示功能示例

    本文实例讲述了Angular实现点击按钮控制隐藏和显示功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示隐藏</title> <style> .box{ width: 100p

  • 基于AngularJS的拖拽文件上传的实例代码

    随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>

  • AngularJS实现的简单拖拽功能示例

    本文实例讲述了AngularJS实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net AngularJS拖拽</title> <style> *{ padding:0; margin:0; } .wei{ wi

  • Angular实现的敏感文字自动过滤与提示功能示例

    本文实例讲述了Angular实现的敏感文字自动过滤与提示功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net angular敏感文字自动过滤</title> <script src="angul

  • 使用angular帮你实现拖拽的示例

    拖拽有多种写法,在这里就看一看angular版的拖拽. <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background:

  • angular-ui-sortable实现可拖拽排序列表

    angular-ui-sortable实现可拖拽排序列表

    项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个Angular的插件:angular-ui-sortable,项目地址:https://github.com/angular-ui/ui-sortable 需要在之前引入jquery,和jquery-ui,否则无法使用. 我们要做的事情,加载数据,拖拽排序并输出当前顺序: js代码: <script src="../../jquery.js"></script> <script src="..

  • AngularJS实现的锚点楼层跳转功能示例

    AngularJS实现的锚点楼层跳转功能示例

    本文实例讲述了AngularJS实现的锚点楼层跳转功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>anchor</title> <style> #wei div{ width:100%; height:720px; background: re

  • Angular实现较为复杂的表格过滤，删除功能示例

    Angular实现较为复杂的表格过滤，删除功能示例

    本文实例讲述了Angular实现较为复杂的表格过滤,删除功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net Angular过滤.删除</title> <style> table{ border: 1px solid black; w

  • Angular实现的简单定时器功能示例

    本文实例讲述了Angular实现的简单定时器功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular定时器</title> <script src="angular.min.js"></scrip

  • AngularJS实现的根据数量与单价计算总价功能示例

    AngularJS实现的根据数量与单价计算总价功能示例

    本文实例讲述了AngularJS实现的根据数量与单价计算总价功能.分享给大家供大家参考,具体如下: 先看一下效果: 代码如下: <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>www.jb51.net angular计算总价</title> <link rel="styles

随机推荐