As shown below:
<!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="">Added items</label>
<input type="text" ng-model="todo">
</form>
<dl>
<dt>To-do Items</dt>
<dd ng-repeat="todo in todos track by $index">
<input type="checkbox" ng-checked="" ng-click="done($index, $event)">
{{}}
<a ng-href="" ng-click=" rel="external nofollow" rel="external nofollow" delete($index, todos)">delete</a>
</dd>
<dt>Things already done{{}}</dt>
<dd ng-repeat="todo in doneTodos track by $index">
<input type="checkbox" ng-checked="" ng-click="undone($index, $event)">
{{}}
<a ng-href="" ng-click=" rel="external nofollow" rel="external nofollow" delete($index, doneTodos)">delete</a>
</dd>
</dl>
</div>
<script src="./libs/"></script>
<script>
// Define a module var App = ('App', []);
// Define a controller ('TodoListController', ['$scope', function($scope) {
// To-do Items $ = [];
// Things completed $ = [];
// $ = '';
// Call ng-submit when entering to add data to the to-do item $ = function () {
// Add data to the array $({text:$, checked: false});
// Clear the input box $ = '';
}
// Completed when checked $ = function (index, ev) {
// (index);
// ($);
// Remove from To Do It var tmp = $(index, 1);
tmp[0].checked = !tmp[0].checked;
// Add deleted items to completed $ = $(tmp);
();
}
// Cancel completed $ = function (index, ev) {
// Delete from completed data var tmp = $(index, 1);
tmp[0].checked = !tmp[0].checked;
// Add matters to the to-do $ = $(tmp);
// ();
}
// Delete the matter, pass the current index and complete data $ = function (index, todos) {
// $(index, 1);
// (todos);
// Delete the corresponding matters of the index value (index, 1);
}
}])
// var arr = [0, 1, 2, 3, 4];
// (2,1)
</script>
</body>
</html>
The above example of AngularJS dynamically adding data and deleting data is all the content I share with you. I hope you can give you a reference and I hope you can support me more.