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

2019-11-19 14:17:18

字体：大中小

来源：转载

供稿：网友

如下所示：

<!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动态添加数据并删除的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：浅谈React中的元素、组件、实例和节点

下一篇：JS严格模式知识点总结