如何使用AngularJS發佈有關按鈕點擊的數據

我有一個應用程序，使用.NET核心框架和純html在前端。我使用AJAX發佈和獲取數據。我是Angular的新手，並決定將應用程序的前端轉換爲Angular以進行學習。如何使用AngularJS發佈有關按鈕點擊的數據

例如，我有一個按鈕可以將員工的狀態從'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); 
     }

上面的代碼爲我工作，它將所述僱員（ENTITYID）的狀態ID更改爲1（nextStateId）

現在我在AngularJS中有一個按鈕，我希望它能夠執行相同的操作。我將如何實現這一目標？由於我仍然在學習的過程中，我不知道如何做到這一點。任何人都可以幫我實現這個目標嗎？這將幫助我學習和做所有類似的按鈕。

謝謝。

來源

2016-09-17 Phoenix

請讓我知道您是否需要關於該項目的更多信息。 :) – Phoenix

您可以使用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

來源

2016-09-17 05:27:41 Sajeetharan

我可以使用控制器功能內的同一個AJAX帖子來發布數據嗎？或者Angular有另一種方法來做到這一點？ – Phoenix

@Phoenix我附上了演示 – Sajeetharan

非常感謝。我將通過演示並嘗試學習。我嘗試在我的應用程序中應用相同的內容，並在嘗試結束後將其標記爲答案...再次感謝。如果我遇到任何問題，我會發表評論。 :) – Phoenix

如何使用AngularJS發佈有關按鈕點擊的數據

回答

相關問題