How to insert new data row in table when clicked on add button with AngularJS

Question

Roadmap: I have a form with one row of some fields and select menus. So, when I insert all the data in that form and press ADD ( + ) button, I want that information automatically added as a row in the table defined below the form.

My Form:

<div class="form-inline">   <!-- location form -->
<div class="form-group">
    <input type="text" placeholder="Landmark" ng-model="company.location.landmark"/> 
</div>
<div class="form-group">
    <input type="text" placeholder="Street 1" ng-model="company.location.street1"/> 
</div>
<div class="form-group">
    <input type="text" placeholder="Street 2" ng-model="company.location.street2"/> 
</div>
<div class="form-group">
    <input type="text" placeholder="City" ng-model="company.location.city"/> 
</div>
<div class="form-group">
    <select>
        <option selected> State </option>
        <option ng-model="company.location.state"> USA </option>
    </select>
</div>
<div class="form-group">
    <input type="text" placeholder="Zip" ng-model="company.location.zip"/> 
</div>
<div class="form-group">
    <select>
        <option selected> Country </option>
        <option ng-model="company.location.country"> Houston </option>
        <option ng-model="company.location.country"> Dallas </option>
    </select>
</div>
<div class="form-group">
    <input type="text" placeholder="Latitude" ng-model="company.location.latitude"/> 
</div>
<div class="form-group">
    <input type="text" placeholder="Longitude" ng-model="company.location.longitude"/> 
</div>
<div class="form-group">
    <select>
        <option selected> Type </option>
        <option ng-model="company.location.type"> Permanent </option>
    </select>
</div>
<div class="form-group">
    <input type="button" class="btn btn-default btn-sm" value=" + " style="height: 25px;"/>
</div>

Note: In this form, I may have the list of contacts and list of locations, so please also correct the ng-model that I have defined like this:

ng-model="company.location" and ng-model="company.location.contact"

TABLE defined right below the form:

<table class="table-striped"> <!-- location table -->
<tr>
    <th>Landmark</th>
    <th>Street 1</th>
    <th>Street 2</th>
    <th>City</th>
    <th>State</th>
    <th>Zip</th>
    <th>Country</th>
    <th>Latitude</th>
    <th>Longitude</th>
    <th>Type</th>
</tr>
<tr ng-repeat="location in company.location">
    <td>{{location.landmark}}</td>
    <td>{{location.street1}}</td>
    <td>{{location.street2}}</td>
    <td>{{location.city}}</td>
    <td>{{location.state}}</td>
    <td>{{location.zip}}</td>
    <td>{{location.country}}</td>
    <td>{{location.latitude}}</td>
    <td>{{location.longitude}}</td>
    <td>{{location.type}}</td>
</tr>

Currently, as I type in the single field of form, an empty row is added as I type. But Actually I want the form added to the table when I click on the ADD button of the form.

My output as I run the page:

My output as I type in some fields:

Finally, all I want you to help me in, is to get working the ADD button of the form. Thank you so much.

Waiting for your kind response.

can you create a plunkr, it will help us to answer your question fast or else lot of effort will need for us. — undefined
– undefined, Commented Jan 10, 2018 at 6:03
@undefined Thanks for response. But I don't know how to create plunkr, and what is it. — Sikandar Sahab
– Sikandar Sahab, Commented Jan 10, 2018 at 6:05
You can use this started angularjs plunkr to add a sample code to illustrate your problem plnkr.co/edit/c3PIZnwxj5aZrkzrpC02?p=preview — undefined
– undefined, Commented Jan 10, 2018 at 6:08
@undefined plnkr.co/edit/XnuIiv?p=preview please have a look at this, is it what you're trying to say? — Sikandar Sahab
– Sikandar Sahab, Commented Jan 10, 2018 at 6:14

lzagkaretos · Accepted Answer · 2018-01-10 06:33:15Z

3

You can use an object in the scope, for the form fields and an array in which you push the object when you press the add button.

You can take a look in created plunker for demonstration purposes.

app.controller('MainCtrl', function($scope) {

  $scope.companyForm = {
    landmark: null,
    street1: null,
    street2: null,
    city: null,
    state: null,
    zip: null,
    country: null,
    latitude: null,
    longitude: null,
    type: null
  }

  $scope.company = {};
  $scope.company.location = [];

  $scope.addLocation = () => {
    $scope.company.location.push({
      landmark: $scope.companyForm.landmark,
      street1: $scope.companyForm.street1,
      street2: $scope.companyForm.street2,
      city: $scope.companyForm.city,
      state: $scope.companyForm.state,
      zip: $scope.companyForm.zip,
      country: $scope.companyForm.country,
      latitude: $scope.companyForm.latitude,
      longitude: $scope.companyForm.longitude,
      type: $scope.companyForm.type
    });
  }

And in html code:

<input type="text" placeholder="Landmark" ng-model="companyForm.landmark"/>

//...

<div class="form-group">
    <input type="button" ng-click="addLocation()" class="btn btn-default btn-sm" value=" + " style="height: 25px;"/>
</div>

For <select> fields, you can define relevant arrays in your Controller:

$scope.states = ['USA'];
$scope.countries = ['Houston', 'Dallas'];
$scope.types = ['Permanent'];

And in html:

<div class="form-group">
    <select ng-model="companyForm.country" ng-options="o as o for o in countries">
        <option value="" selected> Country </option>
    </select>
</div>

Check updated plunker.

edited Jan 10, 2018 at 6:33

answered Jan 10, 2018 at 6:18

lzagkaretos

2,9202 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Sikandar Sahab Over a year ago

thanks we're almost there. But we're not getting the value from all selects

Sikandar Sahab Over a year ago

please tell me how to get data from select option, like country, type, state etc

lzagkaretos Over a year ago

Updated plunker. Take a look.

lzagkaretos Over a year ago

$scope.company is an object with a property location of type array. So company.location.length would return the size of the table, and company.location[0] contents of the first row data.

Sikandar Sahab Over a year ago

it worked. I was providing controller multiple times on the sampe page therefore it caused re-initialization of data. Provided once on <form> and worked. thanks

|

Collectives™ on Stack Overflow

How to insert new data row in table when clicked on add button with AngularJS

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related