Я намагаюся записати функцію, яка дозволяє мені видаляти елемент, коли натискається кнопка, але я думаю, що я плутаюсь із функцією - чи користуюся я $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();
};

Щоб вилучити елемент, потрібно вийняти його з масиву і передати 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

DEMO: 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-повторі

ви можете використовувати один варіант вкладиша

    <div ng-repeat="key in keywords"> 
        <button ng-click="keywords.splice($index, 1)">

            {{key.name}}
        </button>
    </div>

$index використовується кутовим для відображення поточного індексу масиву всередині ng-repeat

Використання $indexпрацює чудово в основних випадках, і відповідь @ charlietfl чудова. Але іноді $indexнедостатньо.

Уявіть, що у вас є один масив, який ви представляєте у двох різних ng-повторах. Один з цих ng-повторів фільтрується для об'єктів, які мають властивість truthy, а інший фільтрується за хибною властивістю. Представлено два різних відфільтрованих масиви, які походять від одного вихідного масиву. (Або якщо це допомагає візуалізувати: можливо, у вас є один масив людей, і ви хочете один ng-повторення для жінок у цьому масиві, а інший для чоловіків у тому ж масиві .) Ваша мета: надійно видалити з оригінальний масив, використовуючи інформацію від членів відфільтрованих масивів.

У кожному з цих відфільтрованих масивів $ index не буде індексом елемента в початковому масиві. Це буде індекс у відфільтрованому підмасиві . Отже, ви не зможете вказати індекс людини в початковому peopleмасиві, ви будете знати лише індекс $ з масиву womenабо menпідмасиву. Спробуйте видалити за допомогою цього, і у вас зникнуть предмети звідусіль, окрім того, де ви хотіли. Що робити?

Якщо вам пощастило, що використання моделі даних включає в себе унікальний ідентифікатор для кожного об'єкта, тоді використовуйте це замість $ index, щоб знайти об'єкт і spliceйого з головного масиву. (Використовуйте мій приклад нижче, але з цим унікальним ідентифікатором.) Але якщо вам не так пощастило?

Angular насправді збільшує кожен елемент у ng-повторюваному масиві (в основному, оригінальному масиві) з унікальною властивістю, що називається $$hashKey. Ви можете шукати оригінальний масив на відповідність $$hashKeyелементу, який ви хочете видалити, і позбутися його таким чином.

Зауважте, що $$hashKeyце детальна інформація про реалізацію, не включена до опублікованого API для ng-повторів. Вони можуть будь-коли видалити підтримку цього ресурсу. Але, мабуть, ні. :-)

$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)"

РЕДАКТУВАННЯ: Використання такої функції, яка натискає $$hashKeyзамість назви властивості, що відповідає конкретній моделі, також має значну додаткову перевагу - зробити цю функцію багаторазовою для використання в різних моделях та контекстах. Надайте його своїм посиланням на масив та посиланням на ваш елемент, і він повинен просто працювати.

Я зазвичай пишу в такому стилі:

<a class="btn" ng-click="remove($index)">Delete</a>


$scope.remove = function(index){
  $scope.[yourArray].splice(index, 1)
};

Сподіваюсь, це допоможе Вам використовувати точку (.) Між $ range та [yourArray]

Грунтуючись на загальноприйнятому відповідь, це буде працювати з ngRepeat, filterі ручки краще очікуваннях:

Контролер:

vm.remove = function(item, array) {
  var index = array.indexOf(item);
  if(index>=0)
    array.splice(index, 1);
}

Вид:

ng-click="vm.remove(item,$scope.bdays)"

реалізація без контролера.

<!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 track by $index">{{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 : Необов’язково. Новий елемент, який потрібно додати до масиву

Я не погоджуюся, що вам слід викликати метод на контролері. Вам слід використовувати сервіс для будь-якого фактичного функціонування, і ви повинні визначати директиви для будь-якої функціональності щодо масштабованості та модульності, а також призначати подію натискання, яка містить виклик службі, яку ви вводите у свою директиву.

Так, наприклад, у вашому 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"), який ви можете легко призначити будь-якому елементу на сторінці. Це робить його модульним і багаторазовим. Це стане в нагоді під час роботи з HEADY парадигмою веб-компонентів Angular 2.0. У 2.0 немає контролера. :)

Щасливого розвитку !!!

Ось ще одна відповідь. Сподіваюся, це допоможе.

<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, ...)

Повне джерело тут
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

якщо у вашому елементі є ідентифікатор або якесь певне поле, ви можете скористатися 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
                });
}

Pass the id that you want to remove from the array to the given function 

від контролера (Функція може бути в тому ж контролері, але вважають за краще тримати його в сервісі)

    function removeInfo(id) {
    let item = bdays.filter(function(item) {
      return bdays.id=== id;
    })[0];
    let index = bdays.indexOf(item);
    data.device.splice(indexOfTabDetails, 1);
  }