CODEWITHSUNDEEP
javascriptjqueryangularjsforms
Sikandar Sahab
Sikandar Sahab

Reputation: 708

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

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: enter image description here

My output as I type in some fields: enter image description here

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.

Upvotes: 0

Views: 1959

Answers (1)

lzagkaretos
lzagkaretos

Reputation: 2910

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.

Upvotes: 3

Related Questions