溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Angular如何實(shí)現(xiàn)的日程表功能

發(fā)布時(shí)間：2021-06-29 12:45:56 來源：億速云 閱讀：199 作者：小新 欄目：web開發(fā)

小編給大家分享一下Angular如何實(shí)現(xiàn)的日程表功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體如下：

先來看看運(yùn)行效果：

Angular如何實(shí)現(xiàn)的日程表功能

具體代碼如下：

<!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、準(zhǔn)備模擬數(shù)據(jù)
     */
    // 模擬數(shù)據(jù)
    var data = {
      user:"吳四",
      items:[
        {action:"約劉詩詩吃飯",done:false},
        {action:"約劉詩詩跳舞",done:false},
        {action:"約劉詩詩敲代碼",done:true},
        {action:"約劉詩詩爬長(zhǎng)城",done:false},
        {action:"約劉詩詩逛天壇",done:false},
        {action:"約劉詩詩看電影",done:false}
      ]
    };
    var myapp=angular.module("myapp",[]);
    /*這里的是自定義過濾器，將數(shù)組items 過濾之后返回arr*/
    myapp.filter("doFilter",function(){
      /*傳入兩個(gè)參數(shù)，一個(gè)數(shù)組items，另一個(gè)是complate*/
      return function(items,flag){
        var arr=[];
        /*遍歷items,如果dones是false或者下邊的按鈕在選中狀態(tài)，就將這一條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(){
        /*對(duì)$scope.action進(jìn)行一下非空判斷*/
        if($scope.action){
          /*如果輸入了內(nèi)容之后，就在數(shù)組的最后加入一條新內(nèi)容*/
          $scope.data.items.push({"action":$scope.action,"done":false});
          /*添加完成之后，將input置空*/
          $scope.action="";
        }
      };
    });
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h3>吳四的日程<span ng-bind="count()"></span></h3>
<div>
  <input type="text" ng-model="action"><button ng-click="add()">添加</button>
</div>
<table>
  <thead>
  <tr>
    <th>序號(hào)</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>

以上是“Angular如何實(shí)現(xiàn)的日程表功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手