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

更新时间：2020-06-29 01:12:01 作者：startmvc

如下所示：<!DOCTYPEhtml><htmllang="en"ng-app="App"><head><metacharset="UTF-8"><title>

如下所示：


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