Append HTML inner elements to the table using Angular Js

273
November 22, 2016, at 12:35 PM

this is my html

<body>
    <div ng-app="tham" ng-controller="tham-control">
        <div class="container">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>`enter code here`
                        <th>Sl.No</th>
                        <th>Product</th>
                        <th>Cost</th>
                        <th>Quantity</th>
                        <th>Total</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="items">
                        <td><input type="number" ng-model="slno"/></td>
                        <td><input type="number" ng-model="product"/></td>
                        <td><input type="number" ng-model="cost"/></td>
                        <td><input type="number" ng-model="quantity"/></td>
                        <td><input type="number" ng-model="total" value="{{ cost*quantity }}"/></td>
                        <td><button ng-click="add_row()" >Add</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

this is my angular js and jquery

<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
    // filter can be added using pipe charcter
    var app = angular.module("tham",[]);
    app.controller("tham-control",function($scope){
        $scope.cost = 0;
        $scope.quantity = 0;
        $scope.total = 0;
        $scope.add_row = function(){
            $this = $(this);
            var html = $this.parents('tr.items').html();
            var  new_html = "<tr class='items'>"+html+"</tr>";
            $this.parents('tbody').append(new_html);
        }
    });
</script>

here i wanna do is that, when i click "Add" button then i want to append "tr.items" row to "tbody" tag using Angular Js. Somebody please correct the question if it is not.

Answer 1

You don't need jQuery for this. You have to create a datasource for your items, and let angular repeat over it.

<div ng-app="tham" ng-controller="ThamController as thc">
    <div class="container">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Sl.No</th>
                    <th>Product</th>
                    <th>Cost</th>
                    <th>Quantity</th>
                    <th>Total</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr class="items" ng-repeat="it in thc.items">
                    <td><input type="text" ng-model="it.slno"/></td>
                    <td><input type="text" ng-model="it.product"/></td>
                    <td><input type="number" ng-model="it.cost"/></td>
                    <td><input type="number" ng-model="it.quantity"/></td>
                    <td><input type="number" ng-value="it.cost * it.quantity"/></td>
                    <td><button ng-click="thc.addRow()" ng-show="$last" class="btn btn-primary">Add</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
var app = angular.module("tham", []);
app.controller("ThamController", [function() {
    var _self = this;
    this.items = [];
    this.addRow = function() {
        _self.items.push({
            slno: '',
            product: '',
            cost: 0,
            quantity: 0
        });
    };
    this.addRow();
}]);

see a working example

Answer 2

Your just doing the complete opossite of what Angular is supposed.

First of all you have to create a repository of your items, even if that is blank, and after that you should iterate through items and print them :

var app = angular.module("tham", []); 
app.controller("tham-control", function($scope) { 
  $scope.items = []; //Initialize Repository 
  $scope.cost = 0; 
  $scope.quantity = 0; 
  $scope.add_row = function() { 
    //Add item to the repository  
    $scope.items.unshift({ 
      'slno': $scope.slno, 
      'product': $scope.product, 
      'cost': $scope.cost, 
      'quantity': $scope.quantity 
    }); 
  } 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body> 
  <div ng-app="tham" ng-controller="tham-control"> 
    <div class="container"> 
      <table class="table table-bordered table-striped"> 
        <thead> 
          <tr>`enter code here` 
            <th>Sl.No</th> 
            <th>Product</th> 
            <th>Cost</th> 
            <th>Quantity</th> 
            <th>Total</th> 
            <th>Action</th> 
          </tr> 
        </thead> 
        <tbody> 
          <tr class="items"> 
            <td> 
              <input type="number" ng-model="slno" /> 
            </td> 
            <td> 
              <input type="text" ng-model="product" /> 
            </td> 
            <td> 
              <input type="number" ng-model="cost" /> 
            </td> 
            <td> 
              <input type="number" ng-model="quantity" /> 
            </td> 
            <td> 
              <input type="number" ng-value="cost*quantity" /> 
            </td> 
            <td> 
              <button ng-click="add_row()">Add</button> 
            </td> 
          </tr> 
          <!-- filter can be added using pipe charcter --> 
          <tr class="items" ng-repeat="item in items"> 
            <td> 
              {{item.slno}} 
            </td> 
            <td> 
              {{item.product}} 
            </td> 
            <td> 
              {{item.cost}} 
            </td> 
            <td> 
              {{item.quantity}} 
            </td> 
            <td> 
              {{item.cost*item.quantity }} 
            </td> 
          </tr> 
        </tbody> 
      </table> 
    </div> 
  </div> 
</body>

You can refer a complete add edit and delete functionality here. http://codereview.stackexchange.com/questions/54475/basic-and-simple-view-add-edit-and-delete-functionality

READ ALSO
Select2 v4.0.0 Performance Issue

Select2 v4.0.0 Performance Issue

Ive been experiencing performance issues with a large number of items in IE when using the select2 drop down adapter. It looks like this is not a new issue to select2 and people have gotten through it in the past (i.

387
Select all except $(this)

Select all except $(this)

I have the following bit of code.

361
Set Image src from ajax response

Set Image src from ajax response

I want to set an image src in my page with the image i receive from an ajax call response but i get a broken image icon when i set the image src with the reponse. .

392
MVC 5 to update multiple records using a dropdown

MVC 5 to update multiple records using a dropdown

I have the following issue unable to get the value from the dropdown list that I tried for couple of weeks to resolve. The following is the view model I am using.

321