Angular實(shí)現(xiàn)的日程表功能【可添加及隱藏顯示內(nèi)容】
本文實(shí)例講述了Angular實(shí)現(xiàn)的日程表功能。分享給大家供大家參考,具體如下:
先來(lái)看看運(yùn)行效果:

具體代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dhdzp.com 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:"約劉詩(shī)詩(shī)吃飯",done:false},
{action:"約劉詩(shī)詩(shī)跳舞",done:false},
{action:"約劉詩(shī)詩(shī)敲代碼",done:true},
{action:"約劉詩(shī)詩(shī)爬長(zhǎng)城",done:false},
{action:"約劉詩(shī)詩(shī)逛天壇",done:false},
{action:"約劉詩(shī)詩(shī)看電影",done:false}
]
};
var myapp=angular.module("myapp",[]);
/*這里的是自定義過(guò)濾器,將數(shù)組items 過(guò)濾之后返回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;
/*判斷還有幾件事兒沒(méi)有完成*/
$scope.count=function(){
var n=0;
/*判斷還有幾件事兒沒(méi)有完成*/
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">
<h2>吳四的日程<span ng-bind="count()"></span></h2>
<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>
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- 基于AngularJS的拖拽文件上傳的實(shí)例代碼
- 使用angular幫你實(shí)現(xiàn)拖拽的示例
- angular-ui-sortable實(shí)現(xiàn)可拖拽排序列表
- AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能示例
- Angular實(shí)現(xiàn)的敏感文字自動(dòng)過(guò)濾與提示功能示例
- Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能示例
- Angular實(shí)現(xiàn)的簡(jiǎn)單定時(shí)器功能示例
- AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能示例
- Angular實(shí)現(xiàn)較為復(fù)雜的表格過(guò)濾,刪除功能示例
- AngularJS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例
相關(guān)文章
AngularJS基礎(chǔ) ng-show 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-show 指令,這里對(duì)ng-show 指令的基礎(chǔ)知識(shí)做了詳細(xì)介紹,并附有代碼示例,希望能幫助學(xué)習(xí)AngularJS的同學(xué)2016-08-08
AnjularJS中$scope和$rootScope的區(qū)別小結(jié)
這篇文章給大家整理了關(guān)于AnjularJS中$scope和$rootScope的區(qū)別,文中運(yùn)用實(shí)例代碼介紹的很詳細(xì),有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-09-09
深入探究AngularJs之$scope對(duì)象(作用域)
本篇文章主要介紹了深入探究AngularJs之$scope對(duì)象(作用域),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
AngularJS遞歸指令實(shí)現(xiàn)Tree View效果示例
這篇文章主要介紹了AngularJS遞歸指令實(shí)現(xiàn)Tree View效果,結(jié)合實(shí)例形式分析了AngularJS基于遞歸指令實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)層次數(shù)據(jù)的相關(guān)操作步驟與注意事項(xiàng),需要的朋友可以參考下2016-11-11
AngularJS入門知識(shí)之MVW類框架的編程思想探討
這篇文章主要介紹了AngularJS入門知識(shí)之MVW類框架的編程思想探討,本文通過(guò)實(shí)現(xiàn)兩個(gè)簡(jiǎn)單的業(yè)務(wù)需求,探討AngularJS和傳統(tǒng)的JavaScript控制DOM實(shí)現(xiàn)方式的差別,并嘗試?yán)斫?MVW此類框架在流行的Web前端開(kāi)發(fā)中的編程思想,需要的朋友可以參考下2014-12-12
angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02

