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 相关文章推荐
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
js观察者模式的弹幕案例
Nov 23 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
?繁体转换的class
2006/10/09 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
pycharm安装图文教程
2017/05/02 Python
Python上下文管理器和with块详解
2017/09/09 Python
Python3解释器知识点总结
2019/02/19 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
竞选卫生委员演讲稿
2014/04/28 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
护士年终个人总结
2015/02/13 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
nginx请求限制配置方法
2021/07/09 Servers