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


Posted in Javascript onFebruary 27, 2018

如下所示:

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

Javascript 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
redux-saga 初识和使用
Mar 10 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
微信小程序实现留言功能
Oct 31 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
JS严格模式知识点总结
Feb 27 #Javascript
总结js函数相关知识点
Feb 27 #Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
详解Vue Elememt-UI构建管理后台
Feb 27 #Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 #Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 #Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 #Javascript
You might like
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
常用PHP框架功能对照表
2014/10/23 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
JavaScript闭包详解
2015/02/02 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python实现马耳可夫链算法实例分析
2015/05/20 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
质检员的岗位职责
2013/11/15 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
法学求职信
2014/06/22 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python