使用AngularJS完成一个简单的todoList

最近在学习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+"/";
%>



  
    
    
    
	
	
	    
	
	
	
	 
  
  
  
		

			
简单的todoList
			
			添加
			
正在进行中
			

				

					{{x.name}}
					完成
					删除
				
			
 	
			
已经完成
			

				

					{{x.name}}
					删除
				
			
		
  
  

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

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

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

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

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

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

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

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