The JavaScript code
sample as given below.
<script>
var
app = angular.module('addConnectionApp',
[])
app.controller('addConnectionCtrl', function ($scope) {
$scope.companies = [{
id: '1',
name: 'ViaIndia'
}, {
id: '2',
name: 'Invia'
}, {
id: '3',
name: 'Dominos'
}, {
id: '4',
name: 'Pizza'
}];
$scope.tents = [{
id: '1',
name: 'Optus'
}];
$scope.fName = null;
$scope.lName = null;
$scope.mobile = null;
$scope.email = null;
$scope.tenantId = 1;//This
is defeult selected item.
$scope.companyId = 1;//This
is defeult selected item.
$scope.accountNo = null;
$scope.imsi = null;
$scope.imei = null;
$scope.message = null;
$scope.addServices = function () {
var self = $scope;
var service = {
FirstName: self.fName,
LastName: self.lName,
MobileNo: self.mobile,
EmailID: self.email,
IMSI: self.imsi,
IMEI: self.imei,
AccountNo: self.accountNo,
Region: self.accountNo,
TenantID: self.tenantId,
CompanyID: self.companyId
};
alert(JSON.stringify(service));
}
});
</script>
The HTML code sample
as given below.
<div class="row" ng-app="addConnectionApp" ng-controller="addConnectionCtrl">
<div class="large-12
columns">
<div class="row">
<div class="large-12
columns">
<h1 class="heading-primary">New Connection</h1>
<div class="intro-primary">
<input type="text" ng-model="fName" placeholder="First Name" required />
<input type="text" ng-model="lName" placeholder="Last Name" required />
<input type="number" ng-model="mobile" maxlength="12" placeholder="MobileNo" required />
<select ng-model="tenantId">
<option data-ng-repeat="ten in tents" value="{{ten.id}}">{{ten.name}}</option>
</select>
<select ng-model="companyId">
<option data-ng-repeat="comp in companies" value="{{comp.id}}">{{comp.name}}</option>
</select>
<input type="text" ng-model="accountNo" placeholder=" company account
no."
required />
<input type="email" ng-model="email" placeholder="Email" required />
<input type="text" ng-model="imsi" placeholder="IMSI" required />
<input type="text" ng-model="imei" placeholder="IMEI" required />
<textarea ng-model="message" placeholder="Message"></textarea>
<div class="hide-for-small">
<a class="button radius small
yellow right"
ng-click="addServices();">Create New Connection</a>
</div>
</div>
</div>
</div>
</div>
</div>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|