Adding fields dynamically to JSON array in angular js

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':'[email protected]','isMarried':'no','nick_name':'ruthu'},{'first_name':'rahul','last_name':'kumar','email':'[email protected]','isMarried':'no','nick_name':'rahul'},{'first_name':'vicky','last_name':'gupta','email':'[email protected]','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.

KenavR · Accepted Answer · 2014-09-24 13:15:51Z

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.

Collectives™ on Stack Overflow

Adding fields dynamically to JSON array in angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related