Angular實現(xiàn)的日程表功能【可添加及隱藏顯示內(nèi)容】
更新時間：2017年12月27日 11:50:19 作者：當(dāng)愛0201
這篇文章主要介紹了Angular實現(xiàn)的日程表功能,帶有向日程表中添加內(nèi)容及隱藏顯示內(nèi)容的功能,涉及AngularJS事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了Angular實現(xiàn)的日程表功能。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chabaoo.cn 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:"約劉詩詩爬長城",done:false},
{action:"約劉詩詩逛天壇",done:false},
{action:"約劉詩詩看電影",done:false}
]
};
var myapp=angular.module("myapp",[]);
/*這里的是自定義過濾器，將數(shù)組items 過濾之后返回arr*/
myapp.filter("doFilter",function(){
/*傳入兩個參數(shù)，一個數(shù)組items，另一個是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(){
/*對$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">
<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>
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
您可能感興趣的文章:
- 基于AngularJS的拖拽文件上傳的實例代碼
- 使用angular幫你實現(xiàn)拖拽的示例
- angular-ui-sortable實現(xiàn)可拖拽排序列表
- AngularJS實現(xiàn)的錨點樓層跳轉(zhuǎn)功能示例
- Angular實現(xiàn)的敏感文字自動過濾與提示功能示例
- Angular實現(xiàn)點擊按鈕控制隱藏和顯示功能示例
- Angular實現(xiàn)的簡單定時器功能示例
- AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能示例
- Angular實現(xiàn)較為復(fù)雜的表格過濾，刪除功能示例
- AngularJS實現(xiàn)的簡單拖拽功能示例
相關(guān)文章
這篇文章主要介紹了Angular通過指令動態(tài)添加組件問題,文中通過寫一個小組件來簡單總結(jié)下，需要的朋友可以參考下2018-07-07
詳解使用angular框架離線你的應(yīng)用（pwa指南）
這篇文章主要介紹了詳解使用angular框架離線你的應(yīng)用（pwa指南），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了淺析AngularJS中的生命周期和延遲處理,是AngularJS中較為核心的深層次內(nèi)容,需要的朋友可以參考下2015-06-06
在angularJs中進(jìn)行數(shù)據(jù)遍歷的2種方法
今天小編就為大家分享一篇在angularJs中進(jìn)行數(shù)據(jù)遍歷的2種方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
本篇文章主要介紹了詳解AngularJS ng-class樣式切換，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06 
這篇文章主要介紹了AngularJS入門知識之MVW類框架的編程思想探討,本文通過實現(xiàn)兩個簡單的業(yè)務(wù)需求,探討AngularJS和傳統(tǒng)的JavaScript控制DOM實現(xiàn)方式的差別,并嘗試?yán)斫?MVW此類框架在流行的Web前端開發(fā)中的編程思想,需要的朋友可以參考下
2014-12-12 
$http是angular中的一個核心服務(wù)，本篇文章主要介紹了angularJS之$http：與服務(wù)器交互示例，具有一定的參考價值，有興趣的可以了解一下。
2017-03-03 
在html規(guī)范里面,它定義了非常多的標(biāo)簽,在這些標(biāo)簽里面,相同標(biāo)簽之間的嵌套,不同標(biāo)簽之間的嵌套,是十分常見,在Angular里面,我們可以通過自定義標(biāo)簽的方式引用組件,這里的標(biāo)簽?zāi)芊裣裨膆tml標(biāo)簽一樣,來嵌入html標(biāo)簽,或者嵌套其他組件標(biāo)簽?zāi)?本文將介紹投影的作用。
2021-05-05 
本文主要介紹了Angular的共享模塊的實現(xiàn)，對此感興趣的同學(xué)，可以實驗一下
2021-05-05