AngularJS动态添加数据并删除

红太狼 2022-07-12 07:58 176阅读 0赞

<!DOCTYPE html>
    <html lang="en" ng-app="App">
    <head>
    	<meta charset="UTF-8">
    	<title>TodoList</title>
    	<style>
    		body {
    			padding: 0;
    			margin: 0;
    		}
    
    		.todo {
    			width: 300px;
    			margin: 100px auto;
    		}
    
    		.todo dd {
    			overflow: hidden;
    		}
    
    		.todo input[type="checkbox"] {
    			float: left;
    		}
    
    		.todo a {
    			float: right;
    		}
    	</style>
    </head>
    <body>
    	
    	<div class="todo" ng-controller="TodoListController">
    		<form ng-submit="addItem()">
    			<label for="">添加事项</label>
    			<input type="text" ng-model="todo">
    		</form>
    		<dl>
    			<dt>待办事项</dt>
    			<dd ng-repeat="todo in todos track by $index">
    				<input type="checkbox" ng-checked="todo.checked" ng-click="done($index, $event)">
    				{
       {todo.text}}
    				<a ng-href="" ng-click="delete($index, todos)">删除</a>
    			</dd>
    			<dt>已办事项{
       {doneTodos.length}}</dt>
    			<dd ng-repeat="todo in doneTodos track by $index">
    				<input type="checkbox" ng-checked="todo.checked" ng-click="undone($index, $event)">
    				{
       {todo.text}}
    				<a ng-href="" ng-click="delete($index, doneTodos)">删除</a>
    			</dd>
    		</dl>
    	</div>
    
    	<script src="./libs/angular.min.js"></script>
    	<script>
    		// 定义一个模块
    		var App = angular.module('App', []);
    
    		// 定义一个控制器
    		App.controller('TodoListController', ['$scope', function($scope) {
    			
    			// 待办事项
    			$scope.todos = [];
    
    			// 已完成事项
    			$scope.doneTodos = [];
    
    			// $scope.todo = '';
    
    			// 回车时调用ng-submit，往待办事项中添加数据
    			$scope.addItem = function () {
    				// 向数组中添加数据
    				$scope.todos.push({text:$scope.todo, checked: false});
    				// 清空输入框
    				$scope.todo = '';
    			}
    
    			// 勾选时完成
    			$scope.done = function (index, ev) {
    				// console.log(index);
    
    				// console.log($scope.todos);
    
    				// 从待办事项中删除
    				var tmp = $scope.todos.splice(index, 1);
    
    				tmp[0].checked = !tmp[0].checked;
    
    				// 将删除的事项添加到已完成里
    				$scope.doneTodos = $scope.doneTodos.concat(tmp);
    
    				ev.preventDefault();
    			}
    
    			// 取消已完成
    			$scope.undone = function (index, ev) {
    				// 从已完成数据中删除
    				var tmp = $scope.doneTodos.splice(index, 1);
    
    				tmp[0].checked = !tmp[0].checked;
    
    				// 将事项添加到待办事项中
    				$scope.todos = $scope.todos.concat(tmp);
    
    				// ev.preventDefault();
    
    			}
    
    			// 删除事项，传递当前索引和完整数据
    			$scope.delete = function (index, todos) {
    				// $scope.doneTodos.splice(index, 1);
    
    				// console.log(todos);
    				// 删除索引值对应的事项
    				todos.splice(index, 1);
    			}
    		}])
    
    		// var arr = [0, 1, 2, 3, 4];
    
    		// arr.splice(2,1)
    
    	</script>
    </body>
    </html>