집 > 기사 > 웹 프론트엔드 > Angular의 일정 기능 구현에 대한 자세한 설명(표시 내용 추가 및 숨기기 가능)

Angular의 일정 기능 구현에 대한 자세한 설명(표시 내용 추가 및 숨기기 가능)

小云云원래의: 2017-12-27 15:03:151921검색

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

이 글의 예시에서는 Angular에서 구현한 일정 기능을 설명합니다. 참고용으로 모두와 공유하세요. 세부 사항은 다음과 같습니다.

실행 효과를 먼저 살펴보겠습니다.

구체 코드는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<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의 일정 기능 구현에 대한 자세한 설명(표시 내용 추가 및 숨기기 가능)

관련 기사