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 相关文章推荐
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
jquery实现用户打分评分特效
May 28 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
详解node中创建服务进程
May 09 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
Vue数字输入框组件的使用方法
Oct 19 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+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
php curl发送请求实例方法
2019/08/01 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
python实现按行切分文本文件的方法
2016/04/18 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
利用python在excel中画图的实现方法
2020/03/17 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
大学生村官典型材料
2014/01/12 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
环境卫生标语
2014/06/09 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
2014年社区工作总结
2014/11/18 职场文书
女方离婚起诉书
2015/05/18 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
Mysql开启外网访问
2022/05/15 MySQL