使用AngularJS完成一个简单的todoList

来源：互联网发布：windows ime文件编辑：程序博客网时间：2024/04/30 23:57

最近在学习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、其他的非常基本，没什么好讲的。

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

0 0