Соединительный элемент из массива ng-repeat, когда этот элемент нажат

Question

У меня есть массив элементов, которые я повторяю.

<li ng-repeat="lineItem in lineItems" class="bouncy-slide-left"> 
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right"> 
     <label for="expenses">{{lineItem.labels.name}}Expense:</label> 
     <br> 
     <select name="expenses" ng-model="expense.name" class="form-control" style="width: 175px;"> 
      <option value="{{expense.name}}" ng-repeat="expense in expenses">{{expense.name}}</option> 
     </select> 
    </div> 
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right"> 
     <label>Material Cost:</label> 
     <br> 
     <input type="text" ng-model="expense.cost" class="form-control" name="material" placeholder="5.00"> 
    </div> 
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right"> 
     <label>Quantity:</label> 
     <br> 
     <input type="text" ng-model="expense.quantity" class="form-control" name="quantity" placeholder="5"> 
    </div> 
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right"> 
     <label>Labor Rate:</label> 
     <br> 
     <input type="text" ng-model="expense.labor" class="form-control" name="labor" placeholder="20.00"> 
    </div> 
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right"> 
     <label>Hours:</label> 
     <br> 
     <input type="text" ng-model="expense.hours" class="form-control" name="hours" placeholder="4"> 
    </div> 
    <div class="form-group col-sm-5 col-lg-3 col-xl-2 pad-right"> 
     <label>Responsible:</label> 
     <br> 
     <span>Renter</span> 
     <input type="radio" name="radio-1"> 
     <span>Owner</span> 
     <input type="radio" name="radio-1"> 
    </div> 

    <br> 
    <div class="col-sm-12 pad-right"> 
     <span class="pad-right">Owner Total: {{ownerTotal}}</span> 
     <span class="pad-right">Renter Total: {{renterTotal}}</span> 
    </div> 
    <div class="col-sm-12 pad-right"> 
     <button class="btn btn-primary btn-sm" ng-click="addExpense()"><i class="fa-check"></i>Add New Expense</button> 
     <button class="btn btn-primary btn-sm" ng-click="removeExpense($event)"><i class="fa-remove"></i>Remove Expense</button> 
    </div> 
</li> 

У меня есть массив, метод добавления и метод удаления.

$scope.lineItems = [ 
    {expense: 1} 
]; 

//when button is clicked 
//add a new blank object to the lineItems array 
$scope.addExpense = function() { 
    var num = Math.random(); 
    var item = {expense: num}; 
    $scope.lineItems.push(item); 
}; 

//when remove button is clicked 
    //remove the specific item that was clicked from the array 
$scope.removeExpense = function($event) {  
    var elm = $event.currentTarget.parentElement.parentElement; 
    console.log(elm); 
    elm.remove(); 
    //need to splice selected item OUT of the array 
    var i = ??? 
    $scope.lineItems.splice(i, 1); 
}; 

Я пробовал несколько вещей здесь. Большинство ответов, которые я нашел, просто используют indexOf, однако элементы динамически генерируются моей моделью. Поэтому я не знаю, как получить индекс того, чего еще не существует.

Я также пробовал некоторые jQueryLite. Я хотел бы просто использовать что-то вроде: когда $ this щелкнут, удалите его из dom. Я не могу найти ответ ANGULAR для этого.

Answer 1

Вместо ng-click="removeExpense($event)" просто передайте lineItem, например ng-click="removeExpense(lineItem)". Вы можете найти lineItem в lineItems по indexOf

$scope.removeExpense = function(lineItem) { 
    var index = $scope.lineItems.indexOf(lineItem); 
    $scope.lineItems.splice(index, 1); 
} 

Answer 2

вызова removeExpense($index) на ng-click как:

<button class="btn btn-primary btn-sm" ng-click="removeExpense($index)"><i class="fa-remove"></i>Remove Expense</button> 

и заменить функцию удалить этот код:

$scope.removeExpense = function(index) { 
    $scope.lineItems.splice(index, 1); 
}