角度角サービスを使用してテーブルから行を削除します

角度サービスを使用してテーブル行を削除しようとしていますが、残念ながらその方法はわかりません。同じコントロールで複数のサービスを使用しているため、サービスを使用して行う必要があります。角度角サービスを使用してテーブルから行を削除します

<script> 
    var myApp = angular.module("myApp", []); 

    myApp.service('allCurrentSettingsService', ['$http', '$q', function ($http, $q) { 
     var allSettings = null; 
     this.getList = function() { 
      var def = $q.defer() 
      if (allSettings) { 
       def.resolve(allSettings); 
      } else { 
       $http.post('GetAllCurrentSettings') 
        .then(function (response) { 
         var response = $.parseJSON(response.data) 
         allSettings = response; 
         def.resolve(allSettings); 
        }); 
      } 
      return def.promise; 
     } 
    }]); 


    myApp.controller('myController', ['$scope', 'allCurrentSettingsService', 
     function ($scope, allCurrentSettingsService) { 

      $scope.allSettings = ''; 
      allCurrentSettingsService.getList().then(function (value) { 
       $scope.allSettings = value; 
      }); 
     } 
    ]); 

    </script>'

そして、これが私のHTMLです：あなたがしたい場合は、フロントエンドから

[HttpPost] 
    public static void DeleteRecord(int settingID) 
    { 
     try 
     { 
      using (SqlConnection conn = new SqlConnection(connStringApps)) 
      { 
       conn.Open(); 
       using (SqlCommand command = new SqlCommand("DeleteCurrentRecord", conn)) 
       { 
        command.CommandType = System.Data.CommandType.StoredProcedure; 
        command.Parameters.Add("@SettingId", SqlDbType.VarChar).Value = settingID; 
        command.ExecuteNonQuery(); 
        command.Parameters.Clear(); 
       } 
       conn.Close(); 
      } 
     } 
     catch (Exception ex) 
     { 
      Console.Write(ex.ToString()); 
     } 

    }

出典

2016-06-13 user6440175

回答を使用する必要が私はそれがだ、あなたのサービスから行を削除するにはお勧めしません。コントローラからそれを行う方が良いですが、サービスから行を削除する方法を理解するには、この例を参照してください。

コントローラから削除するにはサンプルに表示されているようなコントローラとしてサービスコードを変換するだけです。

var app = angular.module("app", []); 
 

 
     app.controller("ctrl", function ($scope, service) { 
 

 
      $scope.data = [ 
 
       { name: "a" }, 
 
       { name: "b" } 
 
      ]; 
 

 
      $scope.deleteRow = function (row) { 
 
       $scope.data = service.removeRow(row, $scope.data); 
 
      } 
 
      
 
      $scope.deleteFromController = function (row) { 
 
       var indexOf = $scope.data.indexOf(row); 
 
       $scope.data.splice(indexOf, 1); 
 
      } 
 

 
     }); 
 

 
     app.service("service", function ($rootScope) { 
 
      this.removeRow = function (row, data) { 
 
       var indexOf = data.indexOf(row); 
 
       data.splice(indexOf, 1); 
 
       return data; 
 
      } 
 

 
     });

<!DOCTYPE html> 
 
<html ng-app="app" ng-controller="ctrl"> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <h5>click on rows: delete from service</h5> 
 
    <table> 
 
     <tr ng-repeat="row in data" ng-click="deleteRow(row)"> 
 
      <td>{{row.name}}</td> 
 
     </tr> 
 
    </table> 
 

 
    <h5>click on rows: delete from controller</h5> 
 
    <table> 
 
     <tr ng-repeat="row in data" ng-click="deleteFromController(row)"> 
 
      <td>{{row.name}}</td> 
 
     </tr> 
 
    </table> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
</body> 
 
</html>

出典

2016-06-13 11:50:04 Maher

助けてくれてありがとう。コントローラーから行を削除する方法を説明できますか？コードを含めると非常に役に立ちます – user6440175

@ user6440175答えが更新されました。実際にあなたの答えが得られれば他の人の答えとして選択してください:) – Maher

ありがとうございます。私は自分のコードを更新し、コントローラにdeleteメソッドを追加しました。どのように私はこのメソッドを呼び出すことができ、削除する値を渡すことができますか教えてください。メソッドは 'HTTP POST'でなければならない – user6440175

：

<div ng-controller="myController"> 
     <table border="1"> 
       <tr ng-repeat="setting in allSettings"> 
        <td><input id="Button1" type="button" value="Delete" data-ng-click="DeleteRow(rowValue)" /></td> 
        <td class="hidden">{{setting.SettingID}}</td> 
        <td>{{setting.CompanyName}}</td> 
        <td>{{setting.CustomerName}}</td> 
        <td>{{setting.DocumentName}}</td> 
       </tr> 
     </table> 
    </div>

コントローラから削除する方法を取り除く削除したいスプライスを設定してください。

削除操作を開始するボタン

が存在しなければならないのhtmlにあなたのHTMLは、大まかなアイデア

<tr ng-repeat ="setting in allSettings"> 
    <td>{{setting.SettingID}}</td> 
    <!-- other items which you wnted to display--> 
    <!-- put one button for delete and use $index to track the index of item to be removed--> 
    <td><button ng-click="removeRow($index)">Remove Row</button></td> 

</tr>

あなたのコントローラー>> FYI

$scope.removeRoe = function(index){ 
//splice will remove the setting row and it will get reflected n the view 
    $scope.allSettings.splice(index,1); 
}

する必要があります

サービスを利用する必要はありません。取り外しはコントローラで行う必要があります。あなたがバックエンドサービスをヒットする必要があります（リクエストをポストまたは削除）の設定を削除しているなら、あなたは、角度サービスに

を更新しました

出典

2016-06-13 11:46:00 MeanMan

角度角サービスを使用してテーブルから行を削除します

答えて

関連する問題