Explication détaillée de l'implémentation de la fonction de planification par Angular (peut ajouter et masquer le contenu d'affichage)-js tutoriel-php.cn

Explication détaillée de l'implémentation de la fonction de planification par Angular (peut ajouter et masquer le contenu d'affichage)

小云云

Libérer： 2017-12-27 15:03:15

original

1880 Les gens l'ont consulté

Cet article présente principalement la fonction de planification implémentée par Angular, avec la fonction d'ajouter du contenu à la planification et de masquer le contenu affiché, et implique des techniques d'implémentation liées à la réponse aux événements AngularJS et au fonctionnement dynamique des éléments de page qui en ont besoin. référez-vous-y. J'espère pouvoir aider tout le monde.

L'exemple de cet article décrit la fonction de planification implémentée par Angular. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetons d'abord un coup d'œil à l'effet de course :

Le code spécifique est le suivant suit :

<!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>

Copier après la connexion

Recommandations associées :

Développement PHP et réalisation d'un planning d'activité simple Calendrier

Développement PHP et production d'un planning d'activité simple Calendrier, planning Table Calendar_PHP tutoriel

Exemple détaillé d'Angular implémentant des fonctions de filtrage et de suppression de tables plus complexes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!