AngularJs小案例_代办与已办事项

最新推荐文章于 2021-10-30 11:38:29 发布

Frank_cxx

最新推荐文章于 2021-10-30 11:38:29 发布

阅读量445

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/Frank_cxx/article/details/75208590

版权

AngularJS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

----------------------------------------------------------

------------------------------------------------

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>待办事项与已办事项</title>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
//创建一个模块
var app = angular.module("app",[]);
//创建一个控制器
app.controller("AppController",["$scope",function($scope){

//定义一个待办事项数组
$scope.todos = [];
//定义一个已办事项数组
$scope.dones = [];

//添加待办事项
$scope.addTodo = function(){
//alert($scope.todo);
//向待办事项数组中添加一个待办事项
$scope.todos.push({text:$scope.todo,flag:false});

//清空文本框
$scope.todo = "";
};

//添已办事项
$scope.done = function(index){
var item = $scope.todos.splice(index,1)[0];

item.flag = true;
$scope.dones.push(item);
};
//取消已办事项
$scope.cancel = function(index){
var item = $scope.dones.splice(index,1)[0];
item.flag = false;
$scope.todos.push(item);

};

//删除待办事项
$scope.delToDo = function(index){
$scope.todos.splice(index,1)[0];

};
//删除已办事项
$scope.delDone = function(index){
$scope.dones.splice(index,1)[0];

};


}]);
</script>
</head>
<style type="text/css">
.doneSpan {
text-decoration:line-through;
font-style: italic;
color: gray;

}
</style>
</head>

<body ng-app="app" ng-controller="AppController">

<div>
<h2>添加待办事项</h2>
<form ng-submit="addTodo()">
请输入：<input type="text" ng-model="todo" />
</form>
</div>

<div>
<h2>待办事项列表{{todos.length}}</h2>
<div ng-repeat="item in todos">
<input type="checkbox" ng-click="done($index)" ng-checked="item.flag" />
<span>{{ item.text }}</span>
     
<a href="javascript:void(0)" ng-click="delToDo($index)" >删除</a>
</div>

</div>

<div>
<h2>已做事项列表:{{ dones.length }}</h2>
<div class="doneSpan">
<div ng-repeat="item in dones">
<input type="checkbox" ng-click="cancel($index)" ng-checked="item.flag" />
<span>{{ item.text }}</span>
     
<a href="javascript:void(0)" ng-click="delDone($index)" >删除</a>
</div>
</div>
</div>

</body>
</html>

Frank_cxx

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AngularJs小案例_代办与已办事项

----------------------------------------------------------------------------------------------------------String path = request.getContextPath();String basePath = request.getScheme()+":/
复制链接

扫一扫