Question

我在前端有一个使用.NET核心框架和纯HTML的应用程序。我正在使用AJAX发布和获取数据。我是Angular的新手，并决定将应用程序的前端转换为Angular用于学习目的。

例如，我有一个按钮，可以改变员工的状态＆＃39; Billed＆＃39;到＆＃39;可用＆＃39;州。可用状态的ID在后端定义，它是＆＃39; 1＆＃39;。

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

以上代码对我有用，它会将员工的状态ID（EntityID）更改为1（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

如何使用AngularJS在按钮单击上发布数据

1 个答案: