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

前端之家收集整理的这篇文章主要介绍了AngularJS动态添加数据并删除的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如下所示:

<Meta charset="UTF-8"> TodoList
  1. <div class="todo" ng-controller="TodoListController"&gt;
  2. <form ng-submit="addItem()"&gt;
  3. <label for=""&gt;<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>事项</label>
  4. <input type="text" ng-model="todo"&gt;
  5. </form>
  6. <dl>
  7. <dt>待办事项</dt>
  8. <dd ng-repeat="todo in todos track by $index"&gt;
  9. <input type="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>" ng-checked="todo.checked" ng-click="done($index,$event)"&gt;
  10. {{todo.text}}
  11. <a ng-href="" ng-click=" rel="external nofollow" rel="external nofollow" delete($index,todos)"&gt;删除</a>
  12. </dd>
  13. <dt>已办事项{{doneTodos.length}}</dt>
  14. <dd ng-repeat="todo in doneTodos track by $index"&gt;
  15. <input type="checkbox" ng-checked="todo.checked" ng-click="undone($index,doneTodos)"&gt;删除</a>
  16. </dd>
  17. </dl>
  18. </div>
  19. <script src="./libs/angular.min.js"&gt;</script>
  20. <script>
  21. // 定义一个模块
  22. var App = angular.module('App',[]);
  23. // 定义一个控制器
  24. App.controller('TodoListController',['$scope',function($scope) {
  25. // 待办事项
  26. $scope.todos = [];
  27. // 已完成事项
  28. $scope.doneTodos = [];
  29. // $scope.todo = '';
  30. // 回车时<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>ng-submit,往待办事项中<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>数据
  31. $scope.addItem = function () {
  32. // 向数组中<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>数据
  33. $scope.todos.push({text:$scope.todo,checked: false});
  34. // 清空输入框
  35. $scope.todo = '';
  36. }
  37. // 勾选时完成
  38. $scope.done = function (index,ev) {
  39. // console.log(index);
  40. // console.log($scope.todos);
  41. // 从待办事项中<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>
  42. var tmp = $scope.todos.splice(index,1);
  43. tmp[0].checked = !tmp[0].checked;
  44. // 将<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>的事项<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>到已完成里
  45. $scope.doneTodos = $scope.doneTodos.concat(tmp);
  46. ev.preventDefault();
  47. }
  48. // 取消已完成
  49. $scope.undone = function (index,ev) {
  50. // 从已完成数据中<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>
  51. var tmp = $scope.doneTodos.splice(index,1);
  52. tmp[0].checked = !tmp[0].checked;
  53. // 将事项<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>到待办事项中
  54. $scope.todos = $scope.todos.concat(tmp);
  55. // ev.preventDefault();
  56. }
  57. // <a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>事项,传递当前索引和完整数据
  58. $scope.delete = function (index,todos) {
  59. // $scope.doneTodos.splice(index,1);
  60. // console.log(todos);
  61. // <a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>索引值对应的事项
  62. todos.splice(index,1);
  63. }
  64. }])
  65. // var arr = [0,1,2,3,4];
  66. // arr.splice(2,1)
  67. </script>

以上这篇AngularJS动态添加数据并删除的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章