7
rated 0 times
[
11]
[
4]
/ answers: 1 / hits: 17233
/ 9 Years ago, wed, january 20, 2016, 12:00:00
I used the code to add the row and 2 columns by clicking the add rows.
My need is,
First fill the values in the input field,
after that click the Add item button, the values must be shown in table structure.
Am the beginneer. Cant able to use the for loop.
Can anyone please solve this issue.
try the code : https://jsfiddle.net/idris9791_/a7L832LL/
<html >
<head>
<meta charset=utf-8>
<meta name=viewport content=initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width>
<title>Add Rows</title>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js></script>
<body ng-controller=MainController ng-app=MyApp>
<a href=# class=button ng-click=addRow()>Add Row</a>
<form>
First Name : <input name=myInput ng-model=user.firstName required>
First Name : <input name=myInput ng-model=user.lastName required>
</form>
<table>
<thead>
<tr>
<th>Some Header</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=rowContent in rows>
<td>{{rowContent.firstName}}</td>
<td>{{rowContent.lastName}}</td>
</tr>
</tbody>
</table>
<script>
angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {
$scope.rows = [];
$scope.counter = 0;
$scope.addRow = function() {
$scope.row.push({
firstName: $scope.firstName,
lastName: $scope.lastName
});
$scope.counter++;
}
}]);
</script>
</body>
</html>
More From » jquery
