如何从范围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)
}