Ci-dessous, je vais partager avec vous un exemple d'ajout et de suppression dynamique de données dans AngularJS. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.
Comme indiqué ci-dessous :
<!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> <p 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> </p> <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>
Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. avenir.
Articles connexes :
Explication détaillée du code source de FastClick (tutoriel détaillé)
Comment implémenter la pagination du contenu d'une table à l'aide de vue et d'élément -ui
Comment utiliser vue pour convertir les horodatages en formats d'heure personnalisés
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!