使用AngularJS完成一个简单的todoList

kkorkk

已于 2023-10-31 20:58:10 修改

阅读量2.3k

点赞数

分类专栏：前端文章标签： angular.js 前端 javascript

于 2017-03-11 20:29:51 首次发布

本文链接：https://blog.csdn.net/kkorkk/article/details/61427671

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

最近在学习AngularJS，做了一个非常非常简单的todoList，怎么个简单法呢，就是连css都没用，其实我认为给新手看就不要用什么css了，直接把功能代码摆在最显眼的位置，一目了然；这个todoList不仅页面简单，功能也非常简单，所以这篇文章完全是针对新手来的。

不多说，先上图。

那么怎么用AngularJS来做这样一个页面呢，先上代码，再来分析。

<%@ 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>angularJS</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
  </head>
  
  <body >
		<div ng-app="myApp" ng-controller="myCtrl">
			<h1>简单的todoList</h1>
			<input type="text" ng-model="newTodo">
			<button ng-click="add()">添加</button>
			<h2>正在进行中</h2>
			<ul>
				<li ng-repeat="x in todoLists|filter:{  'status'  : false}">
					{{x.name}}
					<button ng-click="haveDone(x)">完成</button>
					<button ng-click="deleteItem(x.id)">删除</button>
				</li>
			</ul> 	
			<h2>已经完成</h2>
			<ul>
				<li ng-repeat="x in todoLists |  filter:{ 'status'  :  true  }">
					{{x.name}}
					<button ng-click="deleteItem(x.id)">删除</button>
				</li>
			</ul>
		</div>
  </body>
  <script type="text/javascript">
  			var app = angular.module("myApp",[]);
  			
  			app.controller("myCtrl",function($scope){
  				$scope.todoLists = [
  					{'id':0,'name':"吃饭","status":true},
  					{'id':1,"name":"睡觉","status":false},
  					{'id':2,'name':"打游戏",'status':false}
  				];
  				$scope.add = function(){
  					$scope.todoLists.push({
  						"id":$scope.todoLists.length,"name":$scope.newTodo,"status":false
  					});  					
  					$scope.newTodo = "";
  				};
  				$scope.haveDone = function(x){
  					x.status = true;
  				}
  				$scope.deleteItem = function(x){
  					//如果数组todoLists只剩下最后一个元素，那么将会无法删除，只能使用清空方法
  					if($scope.todoLists.length == 1){
  						$scope.todoLists.pop();
  					}else{
  					$scope.todoLists.splice(x,1);  				
  					}
  				}  			
  			});  			
  </script>
</html>

为了简单起见，我就没把js代码另起文件了，直接一个jsp文件搞定。下面来分析。

1、首先需要引入angular.js文件，这个我就直接使用cdn了。

2、输入框绑定ng-model,因为后面添加新的待办事项会用到

3、li标签使用ng-repeat循环遍历todoLists数组，并且使用过滤器进行过滤，通过判断数组元素的status属性来判断是否事项是否已经完成

4、添加按钮和删除按钮,通过在button标签里面绑定ng-click,然后在controller里面为具体的方法赋值

5、删除的时候，数组的最后一个元素无法删除，这个时候可以使用pop()方法，清空数组，但是前提是需要判断数组的长度是否为1

6、其他的非常基本，没什么好讲的。

最后，本文描述的语言不是很专业，水平也较差，但是针对新手很合适。

kkorkk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
使用AngularJS完成一个简单的todoList

最近在学习AngularJS，做了一个非常非常简单的todoList，怎么个简单法呢，就是连css都没用，其实我认为给新手看就不要用什么css了，直接把功能代码摆在最显眼的位置，一目了然；这个todoList不仅页面简单，功能也非常简单，所以这篇文章完全是针对新手来的。不多说，先上图。那么怎么用AngularJS来做这样一个页面呢，先上代码，再来分析。
复制链接

扫一扫