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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
php图片裁剪函数
2018/10/31 PHP
javascript 事件处理程序介绍
2012/06/27 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JS继承用法实例分析
2015/02/05 Javascript
Bootstrap基础学习
2015/06/16 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
JavaScript类的写法
2016/09/17 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
群众路线专项整治工作情况报告
2014/10/28 职场文书
答谢词范文
2015/01/05 职场文书
家长会后的感想
2015/08/11 职场文书
环保建议书作文300字
2015/09/14 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
MySQL 分页查询的优化技巧
2021/05/12 MySQL
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js