Estou tentando escrever uma função que permita remover um item quando o botão é clicado, mas acho que estou ficando confuso com a função - eu uso $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();
};

Para remover o item, você precisa removê-lo da matriz e pode passar o bdayitem para sua função de remoção na marcação. Em seguida, no controlador, procure o índice do item e remova-o da matriz

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

Então no controlador:

$scope.remove = function(item) { 
  var index = $scope.bdays.indexOf(item);
  $scope.bdays.splice(index, 1);     
}

O Angular detectará automaticamente a alteração na bdaysmatriz e fará a atualização dong-repeat

DEMO: http://plnkr.co/edit/ZdShIA?p=preview

EDIT: se fazer atualizações ao vivo com o servidor usaria um serviço criado por você $resourcepara gerenciar as atualizações da matriz ao mesmo tempo em que atualiza o servidor

Esta é uma resposta correta:

<a class="btn" ng-click="remove($index)">Delete</a>
$scope.remove=function($index){ 
  $scope.bdays.splice($index,1);     
}

Na resposta de @ charlietfl. Eu acho que está errado, já que você passa $indexcomo parâmetro, mas usa o desejo no controlador. Corrija-me se eu estiver errado :)

Caso você esteja dentro de um ng-repeat

você pode usar uma opção de um forro

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

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

$index é usado por angular para mostrar o índice atual da matriz dentro ng-repeat

O uso $indexfunciona perfeitamente bem em casos básicos, e a resposta do @ charlietfl é ótima. Mas, às vezes, $indexnão é suficiente.

Imagine que você tem uma única matriz, que você está apresentando em duas repetições ng diferentes. Um desses ng-repeat's é filtrado para objetos que possuem uma propriedade de verdade e o outro é filtrado para uma propriedade false. Duas matrizes filtradas diferentes estão sendo apresentadas, que derivam de uma única matriz original. (Ou, se ajudar a visualizar: talvez você tenha uma única matriz de pessoas e deseje uma repetição de ng para as mulheres dessa matriz e outra para os homens dessa mesma matriz .) Seu objetivo: excluir com segurança o matriz original, usando informações dos membros das matrizes filtradas.

Em cada uma dessas matrizes filtradas, $ index não será o índice do item na matriz original. Será o índice no sub-array filtrado . Portanto, você não será capaz de informar o índice da pessoa na peoplematriz original , apenas conhecerá o índice $ da womenou mensub-matriz. Tente excluir usando isso, e você terá itens desaparecendo de todos os lugares, exceto onde você queria. O que fazer?

Se você tiver a sorte de usar um modelo de dados, inclua um identificador exclusivo para cada objeto, use-o em vez de $ index, para encontrar o objeto e spliceele fora da matriz principal. (Use meu exemplo abaixo, mas com esse identificador exclusivo.) Mas se você não tiver tanta sorte?

Angular na verdade aumenta cada item em uma matriz ng-repetida (na matriz original principal) com uma propriedade exclusiva chamada $$hashKey. Você pode pesquisar na matriz original por uma correspondência $$hashKeydo item que deseja excluir e se livrar dessa maneira.

Observe que este $$hashKeyé um detalhe de implementação, não incluído na API publicada para ng-repeat. Eles podem remover o suporte para essa propriedade a qualquer momento. Mas provavelmente não. :-)

$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;
    };
  });
}

Invocar com:

ng-click="deleteFilteredItem(item.$$hashKey, refToSourceArray)"

EDIT: O uso de uma função como essa, que digita o $$hashKeynome da propriedade em vez de um nome de propriedade específico do modelo, também tem a vantagem adicional de tornar essa função reutilizável em diferentes modelos e contextos. Forneça sua referência de matriz e referência de item, e deve funcionar.

Eu costumo escrever com esse estilo:

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


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

Espero que isso ajude Você precisa usar um ponto (.) Entre $ scope e [yourArray]

Com base na resposta aceita, isso vai trabalhar com ngRepeat, filtere expections lidar melhor:

Controlador:

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

Visão:

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

implementação sem um controlador.

<!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>

O método splice () adiciona / remove itens de / para uma matriz.

array.splice(index, howmanyitem(s), item_1, ....., item_n)

índice : obrigatório. Um número inteiro que especifica em que posição adicionar / remover itens. Use valores negativos para especificar a posição no final da matriz.

howmanyitem : Opcional. O número de itens a serem removidos. Se definido como 0, nenhum item será removido.

item_1, ..., item_n : opcional. Os novos itens a serem adicionados à matriz

Discordo que você deveria estar chamando um método no seu controlador. Você deve usar um serviço para qualquer funcionalidade real e definir diretivas para qualquer funcionalidade para escalabilidade e modularidade, além de atribuir um evento de clique que contenha uma chamada para o serviço que você injeta em sua diretiva.

Então, por exemplo, no seu HTML ...

<a class="btn" ng-remove-birthday="$index">Delete</a>

Em seguida, crie uma diretiva ...

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);  
        };       
    };
}])

Então em seu serviço ...

angular.module('myApp').factory('myService', [function(){
    return {
        removeBirthday: function(birthdayIndex, scope){
            scope.bdays.splice(birthdayIndex);
            scope.$apply();
        }
    };
}]);

Quando você escreve seu código corretamente dessa maneira, facilita a gravação de alterações futuras sem precisar reestruturá-lo. Ele está organizado corretamente e você está manipulando eventos de clique personalizados corretamente vinculando usando diretivas personalizadas.

Por exemplo, se o seu cliente disser: "ei, agora vamos chamar o servidor e fazer pão e, em seguida, exibir um modal". Você poderá acessar facilmente o próprio serviço sem precisar adicionar ou alterar nenhum código de método HTML e / ou controlador. Se você tivesse apenas uma linha no controlador, acabaria precisando usar um serviço, para estender a funcionalidade ao levantamento mais pesado que o cliente está solicitando.

Além disso, se você precisar de outro botão 'Excluir' em outro lugar, agora terá um atributo de diretiva ('ng-remove-birthday') que poderá atribuir facilmente a qualquer elemento da página. Isso agora o torna modular e reutilizável. Isso será útil ao lidar com o paradigma HEAVY de componentes da web do Angular 2.0. Não há controlador no 2.0. :)

Desenvolvimento feliz !!!

Aqui está outra resposta. Eu espero que isso ajude.

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

A fonte completa está aqui
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

se você tiver um ID ou algum campo específico em seu item, poderá usar filter (). age como Where ().

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

no controlador:

$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 

do controlador (a função pode estar no mesmo controlador, mas prefere mantê-lo em serviço)

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