Как удалить элемент из области AngularJS

Question

**This is my drink list, with a delete button for each ingredient.** 

![My Ingredient Page][1] 


    [1]: http://i.stack.imgur.com/QPNHs.png 

**1. Relevant template html:** 

div.row.editRow(ng-repeat="drink in drinks | orderBy: 'name'") 
    form(ng-submit="editDrink(drink)") 
    div.col-md-3 
     input(value="{{drink.name}}", ng-model="drink.name") 
    div.col-md-3 
     input(value="{{drink.image}}", ng-model="drink.image") 
    div.col-md-1.text-right 
     a(ng-click="addNewIngredient()") + 
    div.col-md-4 
     div.row(ng-repeat="ingredient in drink.ingredients") 
     div.col-md-7 
      select.mixers(value="{{ingredient.name}}", ng-model="ingredient.name", ng-options="i for i in ingredientsList") 
     div.col-md-4 
      input.addForm.ingredient(value="{{ingredient.amount}}", ng-model="ingredient.amount", style="width: 100px;") 
     div.col-md-1 
      a(ng-click="removeIngredientEdit($index)") - 
    div.col-md-1 
     button.btn Save 

2. Соответствующий метод контроллера:

$scope.removeIngredientEdit = function (index) { 
    $scope.newDrink.ingredients.splice(index); 
    console.log('Removed ingredient at index '); 
    }; 

Когда я делаю это ничего не происходит. Я использую mongodb для хранения информации о моем напитке. Я новичок в Angular JS и не знаю, что делать.

Answer 1

В шаблоне, вместо

ng-click="removeIngredientEdit(drink)" 

попробовать что-то вроде:

ng-click="removeIngredientEdit($parent.$index, $index)" 

Первый параметр, $parent.$index является индексом напитка. $index - это индекс ингредиента. Затем вы можете сделать что-то подобное в своем контроллере:

$scope.removeIngredient = function (i, j) { 
    $scope.drinks[i].ingredients.splice(j, 1) 
}