Pass params to function inside AngularJS template

Question

I would like to know, how to pass params to function dynamically inside AngularJS template. I have many rows in table and each row has a button Add deposit. I would like to pass row number to this button's ng-click function.

Here is snippet of my template:

<div id="documentsTable" class="table-responsive">
<table class="table">
    <thead>
        ...
    </thead>
    <tbody ng-repeat="document in data">
        <tr>
            ...
            <td>
                ...
                <button ng-show="document.depositCheckbox" ng-click="addDeposit({id: document.number})" id="addDepositBtn"
                        type="submit" class="btn btn-primary">Add deposit</button>
            </td>
        </tr>
    </tbody>
</table>

Directive:

.directive('documentDirective', ['$compile', '$templateCache', function () {
return {
    templateUrl: 'templates/documentTemplate.html',
    scope: {
        data: '=',
        addDeposit: '&'
    },
    restrict: 'E'
}}]);

And in my HTML file I have:

<document-directive data="documents" add-deposit="addDeposit()"></document-directive>

Function addDeposit in my controller:

$scope.addDeposit = function(documentId) {
    for(var i=0; i<$scope.documents.length; i++) {
        if($scope.documents[i].number == documentId) {
            var depositLength = $scope.documents[i].deposit.length;
            var deposit = {'number': depositLength, 'value': 0, 'paymentDate': new Date(), 'firstRow': false};
            $scope.documents[i].deposit.push(deposit);
            break;
        }
    }
}

Thanks!

Community · Accepted Answer · 2017-05-23 12:24:53Z

2

Ok so as I understand it, you are trying to get which row that you are getting the post request from?

I think you should be able to do that with the $index property of the ng-changed.

So something like:

<button ng-show="document.depositCheckbox" ng-click="addDeposit({id: document.number, rowNumber: $index})" id="addDepositBtn"
                        type="submit" class="btn btn-primary">Add deposit</button>

EDIT: Try this instead then:

<button ng-show="document.depositCheckbox" ng-click="addDeposit()(document.number)" id="addDepositBtn" type="submit" class="btn btn-primary"> Add deposit</button>

And where you pass the function in:

<document-directive data="documents" add-deposit="addDeposit"></document-directive>

Passing in method as parameter: https://stackoverflow.com/a/26244600/1958344

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Dec 10, 2016 at 14:50

Kristian Barrett

3,7924 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

piotrb Over a year ago

It doesn't resolve my problem, because my id: document.number store rowNumber. The problem is that in my addDeposit function I can't get this value - it is undefined.

piotrb Over a year ago

It looks like: I declared in my HTML element, that function addDeposit() has no parameters, so I can't pass any parameters to this function, when I use it in my template.

Kristian Barrett Over a year ago

No that should not have anything to do with it, since you don't have to declare the variables there. Can you post some of the controller code, where you define the addDeposit function?

Collectives™ on Stack Overflow

Pass params to function inside AngularJS template

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related