Angularjs 单击项目时，将该项目从ng重复数组中拼接出来

我有一系列重复的项目

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

我在这里试过几种方法。我找到的大多数答案都只是使用indexOf，但是项目是由我的模型动态生成的。所以我不知道如何得到一些还不存在的东西的索引

我也试过一些jQueryLite。我喜欢使用这样的东西：单击$this时，将其从dom中删除。我似乎找不到确切的答案

只需传递行项目，而不是ng click=removeExpense$事件，如ng click=removeExpenselineItem。然后可以通过indexOf在lineItems中找到lineItem

只需传递lineItem，而不是ng click=removeExpense$事件，如ng click=removeExpenselineItem。然后可以通过indexOf在lineItems中找到lineItem

在ng上调用removeExpense$索引，单击类似：

在ng上调用removeExpense$索引，单击类似：

---

是的，成功了！由于某些原因，我无法将行项目可视化为参数。另外，你对我的添加方法有什么建议吗。现在，我只是使用随机数来避免“重复键”问题。假设我了解您的问题所在，将您的ng repeat设置为ng repeat=lineItems in lineItems track by$index，然后不管是否有重复，@JoshPMPYes，这就行了！由于某些原因，我无法将行项目可视化为参数。另外，你对我的添加方法有什么建议吗。现在，我只是使用随机数来避免“重复键”问题。假设我了解您的问题所在，请将您的ng repeat设置为ng repeat=lineItems in lineItems track by$index，然后不管是否有重复，@Joshpmpt这很危险：如果数组被过滤，ng repeat的$index与数组中的索引不匹配。这很危险：如果对数组进行筛选，ng repeat的$index将与数组中的索引不匹配。

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

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

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