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>

我有一个数组，一个add方法和一个remove方法。

 $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。我很乐意使用类似的东西：当点击$时，将它从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>

并使用以下代码替换remove函数：

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

单击该项目时，从ng-repeat数组中拼出项目

2 个答案: