Link to home
Start Free TrialLog in
Avatar of Ganesh chandran
Ganesh chandran

asked on

unable add rows in angular js table

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <style>
        <style>
   body{ margin:2em;}
      fieldset { display:inline-block;border:1x solid red; padding: 0px 40px 0px 20px; }
      legend {
        padding: 0.2em 0.5em;
        border:1px solid red;
        color:#fff;
        background-color:red;
        font-size:90%;
        width:auto;
      }
      #raidFrieght{
            margin: 10px 0px 10px 0px;
            padding-bottom: 4%;
      }
    table,
    th,
    td {
    border: 1px Solid black;
    border-collapse: collapse;
    }
    th {
    background-color: red;
    color: #fff;
    }
    </style>
</head>
<body>
    <div ng-app="myApp" ng-controller="myController">
      <fieldset>
        <legend> <b>Port Cost <b> </legend>
            <tr style="padding-right:10px;"> Rate </tr>
            <input style="margin-left:4%;" id="rbl_ratetype_0" type="radio" name="rbl_ratetype" value="1" checked="checked" />
            <label for="rbl_ratetype_0">Inbound</label>
            <input style="margin-left:4%;" id="rbl_ratetype_1" type="radio" name="rbl_ratetype" value="2" onclick="javascript:setTimeout('__doPostBack(\'rbl_ratetype$1\',\'\')', 0)" />
            <label for="rbl_ratetype_1">Outbound</label>
            </tr>
            </tr>
       
  <!--CREATE A TABLE-->
        <table>
            <tr>
               <th style="width:5%">SNo</th>
                        <th Style="width:30%">CostHead</th>
                        <th Style="width:15%"> PayTo</th>
                        <th Style="width:15%">Currency</th>
                        <th style="width:10%">20</th>
                        <th style="width:10%">40</th>
                        <th style="width:10%">HQ</th>
                                    
            </tr>

            <tr ng-repeat="data in dataArray">
                <td><label>{{$index + 1}}</label></td>
                        <td><label>{{data.CostHead}}</label></td>
                <td><label>{{data.PayTo}}</label></td>
                <td><label>{{data.Currency}}</label></td>
                        <td><label>{{data.20}}</label></td>
                        <td><label>{{data.40}}</label></td>
                        <td><label>{{data.HQ}}</label></td>
               
            </tr>
                  <td>
            <input type="text" SNo="[]" class="form-control" >
            </td>
            <td>
            <select name="cost_head[]" class="form-control"ng-model= "data.CostHead " required />
            <option>Container Monitoring Fees</option>
            <option>CY Yard to Rail Yard</option>
            </select>
            </td>
            <td>
            <select name="pay_to[]" class="form-control" ng-model="data.PayTo" required />
            <option>Agent</option>
            <option>Dealer</option>
            </select>
            </td>
            <td>
            <select name="currency[]" class="form-control" ng-model="data.Currency" required />
            <option>Euro</option>
            <option>USD</option>
            </select>
            </td>
            <td>
            <input type="text" name="20.00[]" class="form-control" ng-model="data.20" required />
            </td>
            <td>
            <input type="text" name="40.00[]" class="form-control" ng-model="data.40" required />
            </td>
            <td>
            <input type="text" name="HQ[]" class="form-control" ng-model="data.HQ" required />
            </td>
        </table>

        <div>
             <button ng-click="addRow()"> Add Row </button>
               
        </div>
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {

        // JSON ARRAY TO POPULATE TABLE.
        $scope.dataArray = [ ];

        // GET VALUES FROM INPUT BOXES AND ADD A NEW ROW TO THE TABLE.
        $scope.addRow = function () {
            if ($scope.CostHead != undefined && $scope.PayTo != undefined && $scope.Currency != undefined && $scope.20 != undefined && $scope.40 != undefined && $scope.HQ != undefined) {
                var data = [];
                data.CostHead = $scope.CostHead;
                data.PayTo = $scope.PayTo;
                        data.Currency = $scope.Currency;
                        data.20 = $scope.20;
                        data.40 = $scope.40;
                        data.HQ = $scope.HQ;

                $scope.dataArray.push(data);
                        

                // CLEAR TEXTBOX.
                $scope.name = null;
                $scope.director = null;
            }
        };

</script>
</html>
Avatar of M. Tariq
M. Tariq
Flag of Oman image
Man, you have a lot of markup issues and your div container (which you assign the controller to it) doesn't cover all your code.
Revise your markup and wrap your content in a main container to assign the controller to it.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.