如何从范围 AngularJS 中删除项目

Question

**This  is my drink list, with a delete button for each ingredient.**
![My Ingredient Page][1]

  [1]: https://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)
}