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

(编辑：jimmy 日期: 2024/11/8 浏览：3 次 )

如下所示：

<!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="/UploadFiles/2021-04-02/angular.min.js">

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

上一篇：浅谈React中的元素、组件、实例和节点
下一篇：JS严格模式知识点总结