How to use angularJS $http service to post form data

In this post I am going to extend the prototype shown in Create countdown clock. I will show the following concepts of angularJS.

• How to use ng-model to bind text box with model
• How to use ng-click to handle click on a button and call scope method
• How to use angularJS $http service to POST data to server

Prototype

The above prototype display of auctions is based on following code.

<div class="col-xs-5" ng-repeat="auction in auctions">
 <div class="panel panel-info">
  <div class="panel-body">
   <h3>{{auction.Name}}</h3>
   <div><strong>Bids placed:</strong> {{auction.NumberOfBids}}</div>
   <div><strong>Current Bid:</strong> {{auction.CurrentBid | currency}}</div>
   <div class="input-group">
    <input class="form-control" ng-model="auction.myBid" />
    <span class="input-group-btn">
     <button class="btn btn-primary" ng-click="placeBid(auction.Id, auction.myBid)">Place Bid</button>
    </span>
   </div>
   <div><strong>Auction ends in</strong></div>
   <div><h3 class="text-primary"> {{auction.remainingTime|durationview}}</h3></div>
  </div>
 </div>

As you can see that now I have a text box that allows you to enter a bid amount. And then button that you can click to submit that bid. I have used ng-model to bind the text box to auction.myBid property. On button the click is bound to placeBid function in the controller. ng-click creates the required binding to handle click event on the button.

Call RESTful API using $http service

I have updated the controller implementation to handle submission of bid as well as updating the model after successful submission.

ByteBlocksApp.controller("AuctionItemsController", ['$scope', '$http', '$timeout', 'datetime', 
      function ($scope, $http, $timeout, datetime) {
    $scope.apiController = PortalSettings.baseUrl + "/api/auction";
    $scope.listsyncinprogress = false;
    var getAuctionItems = function () {
        $http({ method: 'GET', url: $scope.apiController + '/GetAuctionItems', 
                params: { maxItems: 5 } }).
        success(function (data, status, headers, config) {
            processAuctionItems(data);
            $scope.auctions = data;
            $timeout(getAuctionItems, 10000);
        }).
        error(function (data, status, headers, config) {
            //TODO: log this error
            $timeout(getAuctionItems, 10000);
        });
    };
    var tick = function () {
        $scope.currentTime = moment();
        processAuctionItems($scope.auctions);
        $timeout(tick, 1000);
    }
    var findAuctionItem = function (id) {
        var foundItem = null;
        angular.forEach($scope.auctions, function (item) {
            if (item.Id == id) {
                foundItem = item;
                return false;
            }
        });
        return foundItem;
    };
    var updateAuctionItem = function (data) {
        var item = findAuctionItem(data.Id);
        item.CurrentBid = data.CurrentBid;
        item.NumberOfBids = data.NumberOfBids;
        item.LastBidDateTime = data.LastBidDateTime;
        item.myBid = data.CurrentBid + data.BidIncrement;
    };
    var processAuctionItems = function (data) {
        angular.forEach(data, function (item) {
            item.remainingTime = datetime.getRemainigTime(item.AuctionEndDateTime);
            item.myBid = item.CurrentBid + item.BidIncrement;
        });
    }
    $scope.placeBid = function (id, bidAmount) {
        $http({ method: 'POST', url: $scope.apiController + '/PostBid', 
               data: { Id: id, BidAmount: bidAmount } }).
            success(function (data, status, headers, config) {
                switch (status) {
                    case 200:
                        updateAuctionItem(data.Data);
                        break;
                    default:
                        //TODO: Log this error
                        break;
                }
            }).
            error(function (data, status, headers, config) {
            });
    }
    $scope.currentTime = moment();
    getAuctionItems();
    $timeout(tick, 1000);
    $timeout(getAuctionItems, 10000);
}]);

In this controller placeBid function send a POST request to RESTful API to post the bid amount. After successful submission, the controller updates the data for that item in model itself. This update is reflected back into the view. You can try by submitting bid and see how number of bids count and next bid value in text box is updated.