pTutorial

New way to learn Programming

AngularJS Get Data from Server

AngularJS Get Data on controller Example

AngularJS access form in controller : angularjs form data in contoller with bootstrap form and seprate JS file (Angular app). Using the code below you can get data of form field, form field or element may be varies according to the need.

This form data has many applications in Computer Science or WEB Developement.

HTML for get Data on controller

<html>
<html>
<head>
<link href="http://freeonlinecompiler.ptutorial.com/
css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="http://www.ptutorial.com/angularjs/
angular.min.js" type="text/javascript"></script>
<script type="text/javascript" src="app-form-data-in-controller.js"></script>
</head> 
<body>
<div ng-app="ukapp">
<div ng-controller="ukCtrl" ng-cloak> 
<div class="clear"></div>
<div class="container-fluid main-content">
<div class="row form-list-row mrg-top clearfix">

<div class="col-xs-12 col-sm-12 col-md-8 no-rpad">
<div class="row com-marg">
<div class="col-xs-12 col-sm-12 col-md-12">
<h2>AngularJS Bootstarp dynamic form example</h2>

<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg form-group">
<h5>Customer Care Number</h5>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 ">
<input type="text" class="form-control" name="phone_text" 
ng-model="tempData.customer_care_number" title="Customer Care Number" placeholder="99999999">
</div>

</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5>Sec. Customer Care Number</h5>
<div class="row">

<div class="col-xs-12 col-sm-12 col-md-12">
<input type="text" class="form-control" id="sec_phone" 
ng-model="tempData.sec_customer_care_number" name="secondary_phone_text" 
title="Secondary Customer 
Care Phone No" placeholder="9999999999">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5>Email Address</h5>
<input type="text" class="form-control" name="email_text" 
ng-model="tempData.email_address" 
title="Email address" placeholder="abc@xyz.com">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5>From Email <span style="font-size: 11px;">(Will be 
used to send email)</span></h5>
<input type="text" class="form-control" name="from_email" 
ng-model="tempData.from_email_address" 
title="From Email" placeholder="abc@xyz.com">
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 com-marg">
<a class="btn btn-default"  ng-click="saveCustomerData()">Save</a> 
<a class="btn btn-danger" ng-click="remove()">Cancel</a></div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 com-marg bg-success" 
ng-show="flag">{{tempData}}</div>
</div>

</div>
</div>

</div>
</div>
</div>
</body>
</html>

AngularJS get data on controlle JS

var ukapp = angular.module('ukapp', []);
ukapp.controller('ukCtrl', function ($scope) {
    $scope.tempData = {};
    $scope.tempData.customer_care_number = '';
    $scope.tempData.sec_customer_care_number = '';
    $scope.tempData.email_address = '';
    $scope.tempData.from_email_address = '';
    $scope.flag = false;

    $scope.saveCustomerData = function () {
        $scope.flag = true;
		console.log($scope.tempData);
        alert("Form has been submitted!"+" See the data on firebug as well");		
    }

    $scope.remove = function () {
        delete $scope.tempData;
    }
});
ukapp.filter('capitalize', function () {
    return function (input) {
        return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : '';
    };
});

Download

See Also


QUOTES OF THE DAY

The heart of melody can never be put down.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER