ng-click not working in html table

Question

I am trying to use ng-click inside table but its not working, however outside the table its working fine.

Below is HTML

 <table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Section</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="product in products">
            <td>{{product.ID}}</td>
            <td>{{product.Name}}</td>
            <td>{{product.Section}}</td>
            <td><input type="button" name="name" value="Delete" class="btn btn-danger" ng-click="deleteProduct({{product.ID}});" /></td>
        </tr>
    </tbody>
</table>

On click of Delete button deleteProduct method doesn't call.

Have you tried searching for ng-repeat creates child scope on the interweb? — Tjaart van der Walt
– Tjaart van der Walt, Commented Sep 8, 2015 at 4:48

Md Ashaduzzaman · Accepted Answer · 2015-09-08 05:02:00Z

Problems :

You are traversing through a collection/object named rules and getting single item as rule. So you should access each single items properties with rule.yourProperty. How did product come here?
You don't need any double curly braces to for ng-click function parameters. Simply pass the property of the object. ng-click directive works this way.

HTML :

<div ng-controller="mainCtrl">
    <table class="table table-striped">{{msg}}
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Section</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="rule in rules">
            <td>{{rule.ID}}</td>
            <td>{{rule.Name}}</td>
            <td>{{rule.Section}}</td>
            <td><input type="button" name="name" value="Delete" class="btn btn-danger" ng-click="deleteProduct(rule.ID)" /></td>
        </tr>
    </tbody>
</table>
</div>

angular :

angular.module('myapp', []).controller('mainCtrl', ['$scope', function($scope){
    var data = [
        {
            ID : "1",
            Name : "A1",
            Section : "A1"
        },
        {
            ID : "2",
            Name : "A2",
            Section : "A2"
        },
        {
            ID : "3",
            Name : "A3",
            Section : "A3"
        },
        {
            ID : "4",
            Name : "A4",
            Section : "A4"
        }
    ];

    $scope.rules = data;

    $scope.deleteProduct = function(id){
        alert(id);
        // delete your item here
    };
}]);

jsFiddle

vineet · Accepted Answer · 2015-09-08 04:51:52Z

1

Try this:-

ng-click="deleteProduct(product.ID)"

answered Sep 8, 2015 at 4:51

vineet

14.3k11 gold badges61 silver badges76 bronze badges

1 Comment

vineet Over a year ago

Expressions {{ }} are used to bind application data to html.stackoverflow.com/questions/19599064/…

Collectives™ on Stack Overflow

ng-click not working in html table

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related