AngularJS : Angular copy append $compile does not working

Issue

Here’s my angularjs Controller

var $tr = angular.element("#parent" + obj.field_id).find("tbody"),

$nlast = $tr.find("tr:last"),

$clone = angular.copy($nlast);

$clone.find(':text').val('');

var elem = angular.element($clone);

$tr.after($compile(elem)($scope));

When I tried to remove $compile it’s working but angularjs does not working at all like validation of fields that’s why I need to add a $compile but it doesn’t seem working to me , please help me I’m new in angularJS

Solution

Here’s an example of a simple table built from an object in angularJS. It’s not the only way, but it illustrates some basic concepts, and how to add another row.

In the controller

$scope.tabledata = {
  header: [{name: "id"}, {name: "name"}, {name: "email"}],
  rows: [{
      id: 1,
      name: "Joe",
      email: "[email protected]"
    },
    {
      id: 2,
      name: "Bill",
      email: "[email protected]"
    },
    {
      id: 3,
      name: "Sally",
      email: "[email protected]"
    }
  ]
}

// later I want to add another row:

$scope.tabledata.rows.push({
  id: 4,
  name: "Bob",
  email: "[email protected]"
})

// and like magic, another row is added to the table

The view file:

<table ng-if="tabledata">
  <tr>
    <th ng-repeat="item in tabledata.header">{{item.name}}</th>
  </tr>
  <tr ng-repeat="row in tabledata.rows">
    <td ng-repeat="(key, value) in row">{{value}}</td>
  </tr>
</table>

Answered By – Kinglish

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0