ng-click не работает в таблице html

Я пытаюсь использовать ng-click внутри таблицы, но она не работает, однако вне таблицы она работает нормально.

Ниже 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 не вызывается.


html angularjs angularjs-ng-click
person Gaurav123    schedule 08.09.2015    source источник
comment
Вы пробовали искать ng-repeat создает дочернюю область в Интернете?   -  person Tjaart van der Walt    schedule 08.09.2015

Ответы (2)


arrow_upward
1
arrow_downward

Проблемы:

  1. Вы просматриваете коллекцию/объект с именем rules и получаете один элемент как rule. Таким образом, вы должны получить доступ к свойствам каждого отдельного элемента с помощью rule.yourProperty. Как продукт попал сюда?

  2. Вам не нужны двойные фигурные скобки для параметров функции 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.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

person Md. Ashaduzzaman    schedule 08.09.2015

arrow_upward
1
arrow_downward

Попробуй это:-

ng-click="deleteProduct(product.ID)"
person vineet    schedule 08.09.2015
comment
Выражения {{}} используются для привязки данных приложения к html. " title="angularjs ng disabled не добавляет отключено к кнопке"> stackoverflow.com/questions/19599064/ - person vineet; 08.09.2015