AngularJSを使用してボタンのクリックでデータを投稿する方法

Question

私は.NETコアフレームワークと純粋なhtmlでフロントエンドに作成されたアプリケーションを持っています。私はAJAXを使ってデータを投稿して取得していました。 私はAngularが初めてで、アプリケーションのフロントエンドを学習のためにAngularに変換することを決めました。

例として、従業員の状態が「請求済み」から「使用可能」に変更されるボタンがあります。利用可能な状態のIDはバックエンドで定義され、 '1'です。

 //MOVE TO BENCH BUTTON CLICK 

     $(document).ready(function() 
     { 
      var allVals = []; 


      $("#MoveToBench").click(function() 
      { 
       $('input:checkbox:checked').each(function() { 
        allVals.push($(this).val()); 
       }); 
       for (i = 0;i<allVals.length;i++){ 
        PostBenchList(allVals[i]) 
       } 
       function PostBenchList(entityId) { 
        var data = 'entityID='.concat(entityId).concat('&nextStateId=1'); 

        $.ajax({ 
         type: "POST", 
         contentType: "application/json; charset=utf-8", 
         url: "http://localhost:1783/api/Workflow?"+data, 
         data: data, 
         dataType: "text", 
         success: function (data) { 
          location.reload(); 
          alert("Successfully added the selected Employees to TalentPool"); 
         }, 
         fail: function (error) { 
          Console.Log(error); 
         } 
        }) 
       } 
      }); 

     }); 

上記のコードでは、entityIDの配列を入力として使用しています。 Angularアプリケーションでは、1つのエンティティIDだけが渡されるため、配列は必須ではありません。

バックエンドにおけるAPIコントローラである：

// POST api/values 
     [HttpPost] 
     public void Post(int entityId, int nextStateId) 
     { 
      JObject jsonObject = JObject.Parse(System.IO.File.ReadAllText("Config.Json")); 
      string jsonFile = jsonObject.GetValue("WorkfowJsonFileLocation").ToString(); 
      var nextState = _stateServices.Get(nextStateId); 
      var handler = new WorkflowHandler(nextState, jsonFile, _entityServices, 1, _stateServices, _subStateServices, _appServices); 
      handler.PerformAction(entityId); 
     } 

---

上記のコードは、私のために働いて、それは1に従業員（実体識別子）の状態IDを変更することになる（nextStateId）

今私はAngularJSにボタンを持っており、同じアクションをしたいと思っています。どうすればこれを達成できますか？私はまだ学習の過程にあるので、私はこれを行う方法の手がかりを持っていません。誰も私がこれを達成するのを助けることができますか？これは、私がすべての同様のボタンを学び、やるのに役立ちます。

ありがとうございます。

Answer 1

あなたは、ng-clickを使用してデータを投稿する関数を呼び出すことができ

HTML：

<button ng-click="PostData()"> 
    Click to POST 
    </button> 

コントローラー：

app.controller('PostController',['$scope',function($scope) 
{ 
    $scope.sendPost = function() { 
     var data = $.param({ 
      json: JSON.stringify({ 
       name: $scope.newName 
      }) 
     }); 
     $http.post("/echo/json/", data).success(function(data, status) { 
      $scope.hello = data; 
     }) 
    }  
}]); 

DEMO APP