javascript - 删除 Angular 表中的按钮

Question

我试图向我的 Angular 表添加一个删除按钮，但是当我单击该按钮时没有任何反应。我添加了一些代码来删除 Angular Controller 中的一行，并在删除按钮中引用它。 我是不是忘记了什么？

到目前为止，这就是我所拥有的:

我的 Angular Controller :

angular.module('MyApp')  //extending angular module from first part
    .controller('BudgetAndDetails', function ($scope, BDetail) { //explained about controller in Part2
        $scope.budgetdetails = [];

        BDetail.GetBDetails().then(function (d) {
            $scope.budgetdetails = d.data;
        });
    })
    .factory('BDetail', function ($http) { //explained about factory in Part2
        var fac = {};
        fac.GetBDetails = function () {
            return $http.get('/Budget/BudgetandDetails');
        }
        return fac;
    });

    $scope.removeRow = function (idBudget) {
        var index = -1;
        var comArr = eval($scope.budgetdetails);
        for (var i = 0; i < comArr.length; i++) {
            if (comArr[i].idBudget === idBudget) {
                index = i;
                break;
            }
        }
        if (index === -1) {
            alert("Something gone wrong");
        }
    $scope.budgetdetails.splice(index, 1);
};

我的网页:

<div ng-controller="BudgetAndDetails">
    <table class="tableData" border="0" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th></th>
                <th>Budget Name</th>
                <th>Year</th>
                <th>Month</th>
                <th></th>
            </tr>
        </thead>
        <tbody ng-repeat="O in budgetdetails">
            <tr ng-class-even="'even'" ng-class-odd="'odd'">
                <td class="CX"><span>+</span></td>
                <td>{{O.budget.BudgetName}}</td>
                <td>{{O.budget.Year}}</td>
                <td>{{O.budget.Month}}</td>
                <td><input type="button" value="Remove" class="btn btn-primary" data-ng-click="removeRow(O.budget.idBudget)"/></td>
            </tr>
            <tr class="sub">
                <td></td>
                <td colspan="5">
                    <table class="tableData" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <th>Category</th>
                            <th>SubCategory</th>
                            <th>Amount</th>
                        </tr>
                        <tr ng-repeat="a in O.budgetdetails" ng-class-even="'even'" ng-class-odd="'odd'">
                            <td>{{a.Category}}</td>
                            <td>{{a.Subcategory}}</td>
                            <td>{{a.Amount| currency}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

根据您的代码，您传递的是 Id，而您需要传递“index”。

传递索引后，您可以简单地应用拼接，以便它将从列表中删除该元素/行。

webpage

......
 <tbody ng-repeat="O in budgetdetails">
<tr ng-class-even="'even'" ng-class-odd="'odd'">
            <td class="CX"><span>+</span></td>
            <td>{{O.budget.BudgetName}}</td>
            <td>{{O.budget.Year}}</td>
            <td>{{O.budget.Month}}</td>
            <td><input type="button" value="Remove" class="btn btn-primary" data-ng-click="removeRow($index)"/></td>
 </tr>
........

js controller

.....
$scope.removeRow = function (index) {
if (index === -1) {
    alert("Something gone wrong");
}else{
    $scope.budgetdetails.splice(index,1);
}
......