Hi Folks,
In this article i am explaining a sample application for adding and displaying data using AngularJS and Bootstrap.
Below is the code, you can directly copy and paste and run in your application.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function ($scope) {
$scope.student = {
firstName: "",
lastName: "",
email: ""
};
$scope.reset = function () {
$scope.student.firstName = "";
$scope.student.lastName = "";
$scope.student.email = "";
};
$scope.reset();
$scope.users = [];
$scope.addUser = function () {
console.log($scope.student);
$scope.users.push({
firstName: $scope.student.firstName,
lastName: $scope.student.lastName,
email: $scope.student.email
});
$scope.reset();
};
});
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0" class="table">
<tr>
<td>Enter first name:</td>
<td>
<input name="student.firstname" type="text" ng-model="student.firstName" required> <span style="color:red" ng-show="studentForm.student.firstname.$dirty && studentForm.student.firstname.$invalid">
<span ng-show="studentForm.student.firstname.$error.required">First Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Enter last name:</td>
<td>
<input name="lastname" type="text" ng-model="student.lastName" required> <span style="color:red" ng-show="studentForm.student.lastname.$dirty && studentForm.lastname.$invalid">
<span ng-show="studentForm.student.lastname.$error.required">Last Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input name="email" type="email" ng-model="student.email" length="100" required>
<span style="color:red" ng-show="studentForm.student.email.$dirty && studentForm.student.email.$invalid">
<span ng-show="studentForm.student.email.$error.required">Email is required.</span>
<span ng-show="studentForm.student.email.$error.email">Invalid email address.</span>
</span>
</td>
</tr>
<tr>
<td>
</td>
<td>
<button class="btn btn-primary" ng-click="reset()">Reset</button>
<button class="btn btn-success" ng-disabled="studentForm.$invalid" ng-click="addUser()">Submit</button>
</td>
</tr>
</table>
<p>Total User: {{ users.length }}</p>
<table class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="usr in users track by $index">
<td>{{ usr.firstName }}</td>
<td>{{ usr.lastName }}</td>
<td>{{ usr.email }}</td>
</tr>
</tbody>
</table>
</body>
</html>
I hope you like this article very much & Please don't forget to share.
Thankyou.
In this article i am explaining a sample application for adding and displaying data using AngularJS and Bootstrap.
Below is the code, you can directly copy and paste and run in your application.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function ($scope) {
$scope.student = {
firstName: "",
lastName: "",
email: ""
};
$scope.reset = function () {
$scope.student.firstName = "";
$scope.student.lastName = "";
$scope.student.email = "";
};
$scope.reset();
$scope.users = [];
$scope.addUser = function () {
console.log($scope.student);
$scope.users.push({
firstName: $scope.student.firstName,
lastName: $scope.student.lastName,
email: $scope.student.email
});
$scope.reset();
};
});
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0" class="table">
<tr>
<td>Enter first name:</td>
<td>
<input name="student.firstname" type="text" ng-model="student.firstName" required> <span style="color:red" ng-show="studentForm.student.firstname.$dirty && studentForm.student.firstname.$invalid">
<span ng-show="studentForm.student.firstname.$error.required">First Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Enter last name:</td>
<td>
<input name="lastname" type="text" ng-model="student.lastName" required> <span style="color:red" ng-show="studentForm.student.lastname.$dirty && studentForm.lastname.$invalid">
<span ng-show="studentForm.student.lastname.$error.required">Last Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input name="email" type="email" ng-model="student.email" length="100" required>
<span style="color:red" ng-show="studentForm.student.email.$dirty && studentForm.student.email.$invalid">
<span ng-show="studentForm.student.email.$error.required">Email is required.</span>
<span ng-show="studentForm.student.email.$error.email">Invalid email address.</span>
</span>
</td>
</tr>
<tr>
<td>
</td>
<td>
<button class="btn btn-primary" ng-click="reset()">Reset</button>
<button class="btn btn-success" ng-disabled="studentForm.$invalid" ng-click="addUser()">Submit</button>
</td>
</tr>
</table>
<p>Total User: {{ users.length }}</p>
<table class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="usr in users track by $index">
<td>{{ usr.firstName }}</td>
<td>{{ usr.lastName }}</td>
<td>{{ usr.email }}</td>
</tr>
</tbody>
</table>
</body>
</html>
Thankyou.
