欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS动态添加数据并删除的实例

程序员文章站 2022-07-06 15:38:37
如下所示: ...

如下所示:

<!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=" rel="external nofollow" rel="external nofollow" 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=" rel="external nofollow" rel="external nofollow" 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>

以上这篇angularjs动态添加数据并删除的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。