如下所示：
<!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动态添加数据并删除的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容