Adding fields dynamically to JSON array in angular js - angularjs

Question

I've got two JSON arrays, one for headers and the other for data. I'm handling the headers, and I'm now displaying the data using ng-repeat. working fine. but, i want to add the data dynamically to $scope.data from the view. i've created a button in the last row of the table as 'add row' clicking on it, will fill the last row with input box each for a column. Further from here i'm not finding ways to proceed...since i'm new in angular js.
Please help me.
HTML code and JS is pasted below.
'use strict';
angular.module('mean.system').controller('IndexController', ['$scope', '$http', 'Global','$window',
function($scope, $http,$window) {
$scope.header = [{'field':'first_name', 'displayName':'First name','type':'required'},{'field':'last_name', 'displayName':'Last Name','type':'required'},{'field':'email','displayName':'Email Address','type':'required'}];
$scope.headerAll=[{'field':'first_name', 'displayName':'First name','type':'required'},{'field':'last_name', 'displayName':'Last Name','type':'required'},{'field':'email', 'displayName':'Email','type':'required'},{'field':'isMarried', 'displayName':'marital Status','type':'optional'},{'field':'nick_name', 'displayName':'Nick Name','type':'optional'}]
$scope.optional = [];
$scope.data=[{'first_name':'ruth','last_name':'vick','email':'ruthvick#gmail.com','isMarried':'no','nick_name':'ruthu'},{'first_name':'rahul','last_name':'kumar','email':'rahul#gmail.com','isMarried':'no','nick_name':'rahul'},{'first_name':'vicky','last_name':'gupta','email':'vicky#gmail.com','isMarried':'no','nick_name':'vicky'}]
$scope.headerAll.forEach(function(result){
if (result.type === 'optional') {
$scope.optional.push(result);
}
});
console.log($scope.optional);
$scope.addColumn = function(field){
/*$scope.toPush = {'field':'marital', 'displayName':'married','type':'required'};
$scope.header.push($scope.toPush);*/
$scope.optional.forEach(function(result){
if (result.field === field) {
$scope.header.push(result);
}
});
};
$scope. deleteColumn = function(field,index){
console.log(index);
$scope.optional.forEach(function(result){
console.log(result.field);
if (result.field === field) {
$scope.header.splice(index,1);
}
});
};
$scope.toPoint = function(index){
$scope.index = index;
console.log($scope.index);
};
$scope. editColumn = function(currentField,fieldToEdit,index){
$scope.header.splice($scope.index,1);
$scope.headerAll.forEach(function(result){
if(result.field === fieldToEdit){
$scope.header.splice($scope.index,0,result);
}
});
};
$scope.showAddBtn = 'true';
$scope.addRowButton = function(){
$scope.showInput = 'true';
$scope.showAddBtn = 'false';
};
$scope.cancel = function(){
$scope.showInput = 'false';
$scope.showAddBtn = 'true';
};
$scope.addRow = function(){
$scope.headerAll.forEach(function(result){
var x= result.field;
console.log(x);
$scope.rowObj = {
x : x
};
console.log($scope.rowObj);
});
};
}
]);
<div>
<table class="table table-bordered table-hover">
<thead class="wrapper">
<tr>
<th ng-repeat="data in header">
<div class="col-md-9">{{data.displayName}}</div>
<div class="col-md-1">
<button href="" ng-click="deleteColumn(data.field,$index)"><span class=" glyphicon glyphicon-trash pull-right"> </span></button>
</div>
<div class="dropdown col-md-1" >
<button class="glyphicon glyphicon-pencil dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" ng-click = "toPoint($index);">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
<li role="presentation" ng-repeat="dataEdit in headerAll"><a role="menuitem" tabindex="-1" href="" ng-click="editColumn(data.field,dataEdit.field,$index)">{{dataEdit.displayName}}</a></li>
</ul>
</div>
</th>
<th><div class="dropdown" >
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Add Columns
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
<li role="presentation" ng-repeat="optionalHeader in optional"><a role="menuitem" tabindex="-1" href="" ng-click="addColumn(optionalHeader.field)">{{optionalHeader.displayName}}</a></li>
</ul>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="active" ng-repeat="row in data">
<td ng-repeat="fields in headerAll">
{{row.fields.field}}
</td>
</tr>
<tr>
<td ng-repeat="fields in header">
<input type="text" ng-show="showInput" ng-model="input"></input>
</td>
<td>
<a href="" style="color:#63822E" ng-click="addRow()">
<h5 ng-show= "showInput"><span class="glyphicon glyphicon-ok" ></span></h5>
</a>
<a href="" style="color:#63822E">
<h5 ng-show= "showInput" ng-click="cancel()"><span class="glyphicon glyphicon-remove" ></span></h5>
</a>
<a href= "" style="color:#63822E" ng-click = "addRowButton()" ng-show = 'showAddBtn'>
<h5 ><span class="glyphicon glyphicon-plus-sign"></span>
Add a new row
</h5>
</a>
</td>
</tr>
</tbody>
</table>
</div>
i want what ever i type in the input box to be pushed in the $scope.data with the corresponding header taken from $scope.headerAll;
Thanks.

Answer 1

Here is an example where every update to the <input> fields directly updates the new object in the data array. The save button only hides the <input> fields. I think a better way is to validate the data in a save function and only push it when the data is correct. Therefore I didn't remove the following lines
//$scope.newObject = {};
//Maybe some validation
//$scope.data.push($scope.newObject);
HTML
<div ng-app ng-controller="Controller">
<table>
<tr>
<th ng-repeat="header in headers">{{header.name}}</th>
</tr>
<tr ng-repeat="row in data">
<td>{{row.firstname}}</td>
<td>{{row.lastname}}</td>
<td>{{row.gender}}</td>
</tr>
<tr ng-show="creatingObject">
<td ng-repeat="header in headers">
<input type="text" ng-model="newObject[header.field]">
</td>
</tr>
<tr>
<td></td>
<td><button ng-show="creatingObject" ng-click="saveRow()">Save</button></td>
<td><button ng-hide="creatingObject" ng-click="addRow()">Add Row</button></td>
</tr>
</table>
</div>
Controller
function Controller($scope) {
$scope.headers = [{ 'field': 'firstname', 'name': 'Firstname' },
{ 'field': 'lastname', 'name': 'Lastname' },
{ 'field': 'gender', 'name': 'Gender' }];
$scope.creatingObject = false;
$scope.data = [{'firstname': 'john', 'lastname': 'Doe', 'gender': 'male'} ];
$scope.addRow = function() {
//$scope.newObject = {};
var length = $scope.data.push({});
$scope.newObject = $scope.data[length - 1] ;
$scope.creatingObject = true;
}
$scope.saveRow = function() {
//Maybe some validation
//$scope.data.push($scope.newObject);
$scope.creatingObject = false;
}
}
Hope that helps.