How to add row dynamically in table using angularjs

Posted by Klbaiju under AngularJS 1x on 7/25/2018 | Points: 10 | Views : 551 | Status : [Member] | Replies : 2
Hi,

Following is my working code for adding a row in atable using angularjs

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
debugger;
$scope.InsertEmp = function (Emp) {
$scope.Message = null;
$scope.Emp = {};
$scope.Emp.FirstName=$scope.FirstName;
$scope.Emp.LastName = $scope.LastName;
$scope.Emp.Company = $scope.Company;

$http({
method: "post",
url: "/Home/Insert",
data: JSON.stringify($scope.Emp)
}).then(function (response) {

if (response.data == 'Employee Added Successfully') {
$scope.FirstName = null;
$scope.LastName = null;
$scope.Company = null;
$scope.Message = "Record Added Successfully";
$scope.myStyle = { color: "green", background: "white" }
}
else {
$scope.Message = "Record Not Added";
$scope.myStyle = { color: "red", background: "white" }

}


})

};

});
</script>

My requirement is to display the current record in the table as last record.

ie the table already contains some records

I want to display the current record in the last row

code should be inside the following code

if (response.data == 'Employee Added Successfully') {

$scope.FirstName = null;
$scope.LastName = null;
$scope.Company = null;
$scope.Message = "Record Added Successfully";
$scope.myStyle = { color: "green", background: "white" } }

how it is possible


Regards

Baiju




Responses

Posted by: Swappy_Gaj on: 9/17/2018 [Member] Starter | Points: 25

Up
0
Down
O through below link:
1.https://scotch.io/tutorials/sort-and-filter-a-table-using-angular

2.http://jsfiddle.net/vojtajina/js64b/14/

Klbaiju, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Purvi on: 7/25/2019 [Member] Starter | Points: 25

Up
0
Down
Below is the code to add raw dynamically using angular JS:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

//Style for table

<style>
div{
font:15px Verdana;
width:450px;
}
ul {
padding:0;
margin:2px 5px;
list-style:none;
border:0;
float:left;
width:100%;
}
li {
width:50%;
float:left;
display:inline-block;
}
table, input {
text-align:left;
font:13px Verdana;
}
table, td, th
{
margin:10px 0;
padding:2px 10px;
}
td, th {
border:solid 1px #CCC;
}
button {
font:13px Verdana;
padding:3px 5px;
}
</style>
</head>


//HTML code


<body>
<div ng-app="myApp" ng-controller="myController">
<ul>
<li>Movie Name</li>
<li><input type="text" ng-model="name" /></li>
</ul>
<ul>
<li>Name of Director</li>
<li><input type="text" ng-model="director" /></li>
</ul>
<ul>
<li> </li><li><button ng-click="addRow()"> Add Row </button></li>
</ul>

<!--CREATE A TABLE-->
<table>
<tr>
<th>Code</th>
<th>Movie Name</th>
<th>Director</th>
</tr>

<tr ng-repeat="movies in movieArray">
<td><label>{{$index + 1}}</label></td>
<td><label>{{movies.name}}</label></td>
<td><label>{{movies.director}}</label></td>
<td><input type="checkbox" ng-model="movies.Remove"/></td>
</tr>
</table>

<div>
<button ng-click="submit()">Submit Data</button>  
<button ng-click="removeRow()">Remove Row</button>
</div>

<div id="display" style="padding:10px 0;">{{display}}</div>
</div>
</body>

<!--The Controller-->

//angularJS script to add dynamic rows and columns


<script>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {

// JSON ARRAY TO POPULATE TABLE.
$scope.movieArray =
[
{ 'name': 'Total Eclipse', 'director': 'Agniezka Hollan' },
{ 'name': 'My Left Foot', 'director': 'Jim Sheridan' },
{ 'name': 'Forest Gump', 'director': 'Robert Zemeckis' }
];

// GET VALUES FROM INPUT BOXES AND ADD A NEW ROW TO THE TABLE.
$scope.addRow = function () {
if ($scope.name != undefined && $scope.director != undefined) {
var movie = [];
movie.name = $scope.name;
movie.director = $scope.director;

$scope.movieArray.push(movie);

// CLEAR TEXTBOX.
$scope.name = null;
$scope.director = null;
}
};

// REMOVE SELECTED ROW(s) FROM TABLE.
$scope.removeRow = function () {
var arrMovie = [];
angular.forEach($scope.movieArray, function (value) {
if (!value.Remove) {
arrMovie.push(value);
}
});
$scope.movieArray = arrMovie;
};

// FINALLY SUBMIT THE DATA.
$scope.submit = function () {
var arrMovie = [];
angular.forEach($scope.movieArray, function (value) {
arrMovie.push('Name:' + value.name + ', Director:' + value.director);
});
$scope.display = arrMovie;
};
});
</script>
</html>


Klbaiju, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response