Как удалить элемент или объект из массива с помощью ng-click?
Я пытаюсь написать функцию, которая позволяет мне удалить элемент при нажатии кнопки, но я думаю, что я путаюсь с функцией - я использую $digest
?
HTML & app.js:
<ul ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<a class="btn" ng-click="remove()">Delete</a>
</form>
</li>
</ul>
$scope.remove = function(){
$scope.newBirthday = $scope.$digest();
};
10 ответов:
удалить элемент нужно удалить его из массива и может пройти
bday
элемент для удаления функции в разметке. Затем в контроллере найдите индекс элемента и удалите из массива<a class="btn" ng-click="remove(item)">Delete</a>
затем в контроллер:
$scope.remove = function(item) { var index = $scope.bdays.indexOf(item); $scope.bdays.splice(index, 1); }
угловой автоматически обнаружит изменение к
bdays
массив и сделать обновлениеng-repeat
демо: http://plnkr.co/edit/ZdShIA?p=preview
изменить: если делать живые обновления с сервером будет использовать сервис, который вы создаете с помощью
$resource
для управления обновлениями массива в то же время он обновляет сервер
это правильный ответ:
<a class="btn" ng-click="remove($index)">Delete</a> $scope.remove=function($index){ $scope.bdays.splice($index,1); }
в ответе @charlietfl. Я думаю, что это неправильно, так как вы проходите
$index
как параметр, но вы используете желание вместо этого в контроллере. Поправьте меня, если я ошибаюсь :)
в случае, если вы находитесь внутри ng-repeat
вы можете использовать один вариант лайнера
<div ng-repeat="key in keywords"> <button ng-click="keywords.splice($index, 1)"> {{key.name}} </button> </div>
$index
используется angular для отображения текущего индекса массива внутриng-repeat
используя
$index
отлично работает в основных случаях, и ответ @charlietfl отличный. Но иногда,$index
недостаточно.представьте, что у вас есть один массив, который вы представляете в двух разных ng-repeat. один из этих ng-repeat фильтруется для объектов, которые имеют свойство truthy, а другой фильтруется для свойства falsy. Представлены два различных фильтрованных массива, которые являются производными от одного исходного массива. (Или, если это помогает визуализировать: возможно, у вас есть один массив людей, и вы хотите, чтобы один ng-повтор для женщин в этом массиве, а другой для мужчин в что же массив.) Ваша цель: надежно удалить из исходного массива, используя информацию из членов отфильтрованных массивов.
в каждом из этих отфильтрованных массивов $index не будет индексом элемента в исходном массиве. Это будет индекс в отфильтрованы суб-массива. Таким образом, вы не сможете сказать человеку индекс в оригинале
people
массив, вы будете знать только $индекс отwomen
илиmen
суб-массива. Попробуйте удалить с помощью этого, и вы будете иметь элементы исчезают отовсюду, кроме того, где вы хотели. Что же делать?если вам посчастливилось использовать модель данных, включающую уникальный идентификатор для каждого объекта, то используйте это вместо $ index, чтобы найти объект и
splice
это из основного массива. (Использовать мой пример ниже, но с этим уникальным идентификатором.) Но если это не так так повезло?Angular фактически увеличивает каждый элемент в массиве ng-repeated (в основном, исходном массиве) с уникальным свойством, называемым
$$hashKey
. Вы можете искать исходный массив для соответствия на$$hashKey
элемента, который вы хотите удалить, и избавиться от него таким образом.отметим, что
$$hashKey
- это деталь реализации, не включенная в опубликованный API для ng-repeat. Они могут удалить поддержку этого свойства в любое время. Но, скорее всего, нет. : -)$scope.deleteFilteredItem = function(hashKey, sourceArray){ angular.forEach(sourceArray, function(obj, index){ // sourceArray is a reference to the original array passed to ng-repeat, // rather than the filtered version. // 1. compare the target object's hashKey to the current member of the iterable: if (obj.$$hashKey === hashKey) { // remove the matching item from the array sourceArray.splice(index, 1); // and exit the loop right away return; }; }); }
вызвать с помощью:
ng-click="deleteFilteredItem(item.$$hashKey, refToSourceArray)"
EDIT: используя такую функцию, какие клавиши на
$$hashKey
вместо имени свойства, специфичного для модели, также имеет значительное дополнительное преимущество, заключающееся в том, что эта функция повторно используется в разных моделях и контекстах. Предоставьте ему ссылку на массив и ссылку на элемент, и он должен просто работать.
основываясь на принятом ответе, это будет работать с
ngRepeat
,filter
и ручка ожидания лучше::
vm.remove = function(item, array) { var index = array.indexOf(item); if(index>=0) array.splice(index, 1); }
View:
ng-click="vm.remove(item,$scope.bdays)"
Я обычно пишу в таком стиле :
<a class="btn" ng-click="remove($index)">Delete</a> $scope.remove = function(index){ $scope.[yourArray].splice(index, 1) };
надеюсь, что это поможет Вы должны использовать точку(.) между $scope и [yourArray]
Я не согласен, что вы должны быть вызов метода в контроллере. Вы должны использовать службу для любой фактической функциональности, и вы должны определять директивы для любой функциональности для масштабируемости и модульности, а также назначать событие click, которое содержит вызов службы, которую вы вводите в свою директиву.
Так, например, на вашем HTML...
<a class="btn" ng-remove-birthday="$index">Delete</a>
затем создайте директиву...
angular.module('myApp').directive('ngRemoveBirthday', ['myService', function(myService){ return function(scope, element, attrs){ angular.element(element.bind('click', function(){ myService.removeBirthday(scope.$eval(attrs.ngRemoveBirthday), scope); }; }; }])
затем в услуга...
angular.module('myApp').factory('myService', [function(){ return { removeBirthday: function(birthdayIndex, scope){ scope.bdays.splice(birthdayIndex); scope.$apply(); } }; }]);
когда вы пишете свой код правильно, как это, вы сделаете его очень легко писать будущие изменения без необходимости реструктуризации кода. Он организован правильно, и вы правильно обрабатываете пользовательские события щелчка, привязывая их с помощью пользовательских директив.
например, если ваш клиент говорит: "Эй, теперь давайте заставим его позвонить на сервер и сделать хлеб, а затем всплывающее окно модальное."Вы сможете легко просто пойти на саму службу без необходимости добавьте или измените любой код метода HTML и / или контроллера. Если бы у вас была только одна линия на контроллере, вам в конечном итоге нужно было бы использовать сервис для расширения функциональности до более тяжелого подъема, о котором просит клиент.
кроме того, если вам нужна еще одна кнопка "Удалить" в другом месте, теперь у вас есть атрибут директивы ("ng-remove-birthday"), который вы можете легко назначить любому элементу на странице. Это теперь делает его модульным и многоразовым. Это пригодится при работе с Тяжелые веб-компоненты парадигмы углового 2.0. В 2.0 нет контроллера. :)
Счастливый Развивается!!!
реализация без контроллера.
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <script> var app = angular.module("myShoppingList", []); </script> <div ng-app="myShoppingList" ng-init="products = ['Milk','Bread','Cheese']"> <ul> <li ng-repeat="x in products">{{x}} <span ng-click="products.splice($index,1)">×</span> </li> </ul> <input ng-model="addItem"> <button ng-click="products.push(addItem)">Add</button> </div> <p>Click the little x to remove an item from the shopping list.</p> </body> </html>
метод splice () добавляет/удаляет элементы в/из массива.
array.splice(index, howmanyitem(s), item_1, ....., item_n)
индекс: Требуемый. Целое число, указывающее, в какой позиции добавлять / удалять элементы, используйте отрицательные значения, чтобы указать позицию из конца массива.
howmanyitem (s): факультативно. Количество элементов, которые необходимо удалить. Если установлено значение 0, никакие элементы не будут удаленный.
item_1, ..., item_n: факультативно. Новый элемент(Ы), который будет добавлен в массив
вот еще один ответ. Я надеюсь, что это поможет.
<a class="btn" ng-click="delete(item)">Delete</a> $scope.delete(item){ var index = this.list.indexOf(item); this.list.splice(index, 1); } array.splice(start) array.splice(start, deleteCount) array.splice(start, deleteCount, item1, item2, ...)
полный источник here
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
Если у вас есть ID или любое конкретное поле в вашем элементе, вы можете использовать filter(). его действие, как где ().
<a class="btn" ng-click="remove(item)">Delete</a>
в контроллере:
$scope.remove = function(item) { $scope.bdays = $scope.bdays.filter(function (element) { return element.ID!=item.ID }); }