Удаление элемента из массива при нажатии на кнопку
Здравствуйте!
Прошу помощи, пытаюсь немного переделать пример "Список дел" с оф. сайта (http://angular-doc.herokuapp.com/). Не могу понять, как сделать так, чтобы удалить элемент можно было по нажатию кнопки у каждого дела, в примере дела выбираются чекбоксами и удаляются толпой. Исходный код: <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <script src="todo.js"></script> <link rel="stylesheet" href="todo.css"> </head> <body> <h2>Список дел</h2> <div ng-controller="TodoCtrl"> <span>Осталось {{remaining()}} из {{todos.length}}</span> [ <a href="" ng-click="archive()">архив</a> ] <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="впишите новое дело"> <input class="btn-primary" type="submit" value="добавить"> </form> </div> </body> </html> function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; $scope.addTodo = function() { $scope.todos.push({text:$scope.todoText, done:false}); $scope.todoText = ''; }; $scope.remaining = function() { var count = 0; angular.forEach($scope.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; $scope.archive = function() { var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) $scope.todos.push(todo); }); }; } В моем случае, я в ng-repeat подставляю <span data-role="remove" ng-click="archive()"></span> и при клике хочу удалить дело. Написал вот так: $scope.archive = function() { $scope.todos.pop(); }; Но не учел что удаляет последний элемент в массиве. |
One_Two,
Нужно в функцию передавать дело и через filter или splice удалять из $scope.todos |
передаю - archive(todo), в $scope.archive приходит удаляемый объект. А как узнать его индекс?
|
angular удаление по индексу
One_Two,
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <script>function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; $scope.addTodo = function() { $scope.todos.push({text:$scope.todoText, done:false}); $scope.todoText = ''; }; $scope.archive = function(indx) { $scope.todos.splice(indx,1); }; } </script> <style type="text/css"> [data-role] { font-weight: bold; cursor: pointer; } </style> </head> <body> <h2>Список дел</h2> <div ng-controller="TodoCtrl"> <span>Всего {{todos.length}}</span> <ul class="unstyled"> <li ng-repeat="todo in todos"> <span class="done-{{todo.done}}">{{todo.text}}</span> <span data-role="remove" ng-click="archive($index)">удалить</span> </li> </ul> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="впишите новое дело"> <input class="btn-primary" type="submit" value="добавить"> </form> </div> </body> </html> |
Всем очень благодарен! Теперь всё понятно)
|
Часовой пояс GMT +3, время: 22:36. |