角度テーブルのボタンを削除

Question

角度テーブルに削除ボタンを追加しようとしていますが、ボタンをクリックしても何も起こっていません。私は角度コントローラの行を削除するためのコードを追加し、削除ボタンで参照しました。 私は何かを忘れましたか？

は、これまでのところ、これは私が持っているものです。

マイ角度コントローラ：

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

私のWebページ：このコードの一部が外コントローラでどのように来る

<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

？

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

任意の範囲の機能は、コントローラの内部にあるべきです。

コントローラーに貼り付けます。それが動作します。

Answer 2

コードごとに、IDを渡す代わりに、 "index"を渡す必要があります。

インデックスを渡した後、スプライスを適用するだけで、その要素/行がリストから削除されます。

Webページ

...... 
<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コントローラ

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