Search code examples
jqueryangularjsangularjs-ng-repeatappendprepend

How to Append a table row with J Query repeated with ng-repeat to a Table getting error $compile not found |Angular js

I have a <table> where user can generate a new table row <tr>. i used j Query .prepend() to generate new tr, each row contains a <datalist> filled up with ng-repeat, so user can select an item to purchase. My problem is that when i am trying to compile the new <tr> element i got error $compile is not defined.

This is my View :

<body ng-app="MyApp">
    <div class="container" ng-controller="sellAndSupply">
        <table id="purchasesTable">
            <thead>
                <tr>
                    <tr>
                        <td>Supplier Name</td>
                        <td><input type="text"/></td>
                    </tr>
                    <tr>
                        <td>Telephone</td>
                        <td><inpu type="text"/></td>
                    </tr> 
                    <tr>
                        <td>Location</td>
                        <td><input type="text"></td>
                    </tr>
                <tr>
                    <th class="text-center"><h4><strong>Item Name</strong></h4></th>
                    <th class="text-center"><h4><strong>Quantity</strong></h4></th>
                    <th class="text-center"><h4><strong>Item Price</strong></h4></th>
                    <th class="text-center"><h4><strong>Total Price</strong></h4></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" list="itemList" class="form-control">

                        <datalist id="itemList">
                            <option ng-repeat="accesso in allAccessories" value={{accesso.name}}>
                        </datalist>
                    </td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td class="newEntityPurchase"><label>New Entity</label></td>
                </tr>
                <tr>
                    <td colspan="4">Sell</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

This is my JS:

var articleHTML= angular.element('<tr><td><input type="text" list="itemList" class="form-control"><datalist id="itemList"><option ng-repeat="accesso in allAccessories" value={{accesso.name}}></datalist></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td></tr>');
var compileAppendedArticleHTML= $compile(articleHTML);
var element = compileAppendedArticleHTML($scope);

/* Generate a new entity row for Purchases table */
$(".newEntityPurchase").click(function(){
    $('#purchasesTable > tbody:last-child').prepend(element);
});
Solution

  • You should generate new row using Angular not by jQuery.