집 >웹 프론트엔드 >JS 튜토리얼 >Angular에서 일정 기능을 구현하는 방법

Angular에서 일정 기능을 구현하는 방법

亚连원래의: 2018-06-15 11:20:061631검색

이 글에서는 주로 Angular에서 구현하는 일정 기능을 소개합니다. 일정에 콘텐츠를 추가하고 표시되는 콘텐츠를 숨기는 기능입니다. AngularJS 이벤트 응답 및 페이지 요소의 동적 작동과 관련된 구현 기술이 포함되어 있어 도움이 필요한 친구들이 참고할 수 있습니다.

이 글의 예시에서는 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>
<p>
  <input type="text" ng-model="action"><button ng-click="add()">添加</button>
</p>
<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>
<p>显示全部<input type="checkbox" ng-model="complate"></p>
</body>
</html>

위는 제가 모두를 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Angular에서 일정 기능을 구현하는 방법

관련 기사