ng-click 在 html table 中不起作用

Question

我正在尝试在 table 中使用 ng-click 但它不起作用，但是在 table 之外它工作正常。

下面是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>

单击 Delete 按钮时 deleteProduct 方法不会调用。

Answer 1

试试这个：-

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

Answer 2

问题：

您正在遍历名为 rules 的 collection/object 并获得单个项目规则。因此，您应该使用 rule.yourProperty 访问每个单独的项目属性。产品是怎么来的？
对于 ng-click 函数参数，您不需要任何双花括号。只需传递对象的属性即可。 ng-click 指令以这种方式工作。

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

ng-click 在 html table 中不起作用

ng-click not working in html table

html

angularjs

angularjs-ng-click