溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

AngularJS動(dòng)態(tài)添加數(shù)據(jù)并刪除的實(shí)例

發(fā)布時(shí)間：2020-09-05 13:01:51 來(lái)源：腳本之家 閱讀：144 作者：約德爾蒙 欄目：web開發(fā)

如下所示：

<!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="">添加事項(xiàng)</label>
			<input type="text" ng-model="todo">
		</form>
		<dl>
			<dt>待辦事項(xiàng)</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>已辦事項(xiàng){{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>
		// 定義一個(gè)模塊
		var App = angular.module('App', []);
		// 定義一個(gè)控制器
		App.controller('TodoListController', ['$scope', function($scope) {
			
			// 待辦事項(xiàng)
			$scope.todos = [];
			// 已完成事項(xiàng)
			$scope.doneTodos = [];
			// $scope.todo = '';
			// 回車時(shí)調(diào)用ng-submit，往待辦事項(xiàng)中添加數(shù)據(jù)
			$scope.addItem = function () {
				// 向數(shù)組中添加數(shù)據(jù)
				$scope.todos.push({text:$scope.todo, checked: false});
				// 清空輸入框
				$scope.todo = '';
			}
			// 勾選時(shí)完成
			$scope.done = function (index, ev) {
				// console.log(index);
				// console.log($scope.todos);
				// 從待辦事項(xiàng)中刪除
				var tmp = $scope.todos.splice(index, 1);
				tmp[0].checked = !tmp[0].checked;
				// 將刪除的事項(xiàng)添加到已完成里
				$scope.doneTodos = $scope.doneTodos.concat(tmp);
				ev.preventDefault();
			}
			// 取消已完成
			$scope.undone = function (index, ev) {
				// 從已完成數(shù)據(jù)中刪除
				var tmp = $scope.doneTodos.splice(index, 1);
				tmp[0].checked = !tmp[0].checked;
				// 將事項(xiàng)添加到待辦事項(xiàng)中
				$scope.todos = $scope.todos.concat(tmp);
				// ev.preventDefault();
			}
			// 刪除事項(xiàng)，傳遞當(dāng)前索引和完整數(shù)據(jù)
			$scope.delete = function (index, todos) {
				// $scope.doneTodos.splice(index, 1);
				// console.log(todos);
				// 刪除索引值對(duì)應(yīng)的事項(xiàng)
				todos.splice(index, 1);
			}
		}])
		// var arr = [0, 1, 2, 3, 4];
		// arr.splice(2,1)
	</script>
</body>
</html>

以上這篇AngularJS動(dòng)態(tài)添加數(shù)據(jù)并刪除的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手