Angular Adding Table New Rows Dynamically

Angular Adding Table New Rows Dynamically

Today, We want to share with you Angular Adding Table New Rows Dynamically.
In this post we will show you angularjs Adding New Rows Dynamically table row, hear for Add Table Row Dynamically we will give you demo and example for implement.
In this post, we will learn about Add or Remove Table Rows Dynamically in AngularJS with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.

READ :  Remove hash from AngularJs Routing Url

AngularJS simple Grid directive is all data populated with same data values from a local data values or remote data values source file in bulk,
data loading the data simply partially or load to in whole at one time in url.

Example : Example of AngularJS – Adding row/Removing row Table Rows Dynamically
index.html

<html ng-app="infinityknowApp">
<head>
<title>Add Table Row Dynamically using Angularjs with Example</title>
<link rel="stylesheet" href="yourappfolder/bootstrap.min.css">
<script src="yourappfolder/jquery.min.js"></script>
<script src="yourappfolder/bootstrap.min.js"></script>
<script src="yourappfolder/angular.min.js"></script>
</head>
<body ng-controller="infinityknowCtrl">
<h2>Players Information Form</h2>
<form class="form-horizontal" role="form" ng-submit="addPlayer()">
	<div class="form-group">
		<label class="col-md-2 control-label">Player Name</label>
		<div class="col-md-4">
			<input type="text" class="form-control" name="playername"
				ng-model="playername" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-md-2 control-label">Player Info</label>
		<div class="col-md-4">
			<input type="text" class="form-control" name="playerinfo"
				ng-model="playerinfo" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-md-2 control-label">Player Address</label>
		<div class="col-md-4">
			<input type="text" class="form-control" name="playeraddress"
				ng-model="playeraddress" />
		</div>
	</div>
	<div class="form-group">								
		<div style="padding-left:110px">
			<input type="submit" value="Submit" class="btn btn-primary"/>
		</div>
	</div>
</form>
<hr/>
<h3>List Of Indian Cricketer Team</h3>
<table class="table" border="2">
	<tr>
		<th>Player ID</th>
		<th>Player Name
		</th>
		<th>Player Information
		</th>
		<th>Player Address
		</th>
	</tr>
	<tr ng-repeat="player in playersinfo | orderBy : player.playername">
		<td>{{$index + 1}}</td>
		<td>{{player.playername}}
		</td>
		<td>{{player.playerinfo}}
		</td>
		<td>{{player.playeraddress}}
		</td>
	</tr>
</table>
</body>
</html>

controller.js

var infinityknowApp = angular.module("infinityknowApp", []);
infinityknowApp.controller("infinityknowCtrl", function($scope) 
{
$scope.playersinfo = [
					{ 'playername':'Virat kohali',
					'playerinfo': 982567584,
					'playeraddress': 'surat'},
					{ 'playername':'virendra sehwang',
					'playerinfo': 997485699989,
					'playeraddress': 'hidden garden'},
					{ 'playername':'m s dhoni',
					'playerinfo': 98568565600,
					'playeraddress': 'jamuu kashmir'},
					{ 'playername':'happys jayus patel bro (hjp)',
					'playerinfo': 87599985200,
					'playeraddress': 'ganesh park'},
					{ 'playername':'sahid afridi',
					'playerinfo': 87585220220,
					'playeraddress': 'pakistan'},
					];
$scope.addPlayer = function()
{		
	$scope.playersinfo.push({ 'playername':$scope.playername, 'playerinfo': $scope.playerinfo, 'playeraddress':$scope.playeraddress });
	$scope.playername='';
	$scope.playerinfo='';
	$scope.playeraddress='';
};

});

http://plnkr.co/edit/VJSO588pXYBc72mC0sfg?p=preview

READ :  Angularjs Loading Progress Bar percentage spinner

https://hello-angularjs.appspot.com/removetablerow

https://jsfiddle.net/9qttf7ph/

Leave a Reply

Your email address will not be published. Required fields are marked *