AngularJS를 사용하여 버튼 클릭시 데이터를 게시하는 방법

Question

.NET Framework 및 순수 HTML로 프런트 엔드로 만든 응용 프로그램이 있습니다. 나는 AJAX를 사용하여 데이터를 게시하고 가져 왔습니다. 저는 Angular를 처음 접했고 학습 목적으로 응용 프로그램의 프론트 엔드를 Angular로 변환하기로 결정했습니다.

예를 들어 직원 상태를 'Billed'에서 'Available'상태로 변경하는 버튼이 있습니다. 사용 가능한 상태에 대한 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 응용 프로그램의 경우 하나의 엔티티 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로 직원 (에는 EntityID)의 상태 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