Home > Article > Web Front-end > How to dynamically add and delete data in AngularJS?

How to dynamically add and delete data in AngularJS?

亚连Original: 2018-06-04 11:14:331877browse

Below I will share with you an example of dynamically adding and deleting data in AngularJS. It has a good reference value and I hope it will be helpful to everyone.

is as follows:

<!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>
	
	<p 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>
	</p>
	<script src="./libs/angular.min.js"></script>
	<script>
		// 定义一个模块
		var App = angular.module(&#39;App&#39;, []);
		// 定义一个控制器
		App.controller(&#39;TodoListController&#39;, [&#39;$scope&#39;, function($scope) {
			
			// 待办事项
			$scope.todos = [];
			// 已完成事项
			$scope.doneTodos = [];
			// $scope.todo = &#39;&#39;;
			// 回车时调用ng-submit，往待办事项中添加数据
			$scope.addItem = function () {
				// 向数组中添加数据
				$scope.todos.push({text:$scope.todo, checked: false});
				// 清空输入框
				$scope.todo = &#39;&#39;;
			}
			// 勾选时完成
			$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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed explanation of FastClick source code (detailed tutorial)

How to implement table content paging using vue and element-ui

How to use vue to convert timestamps into custom time formats

The above is the detailed content of How to dynamically add and delete data in AngularJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to access JS object properties and methodsNext article：How to access JS object properties and methods

See more

How to dynamically add and delete data in AngularJS?

Related articles