Passing table row to function in Angular

Question

I'm super new to angular, and I've been told of it's greatness, but also of it's annoyingly high learning curve. I've been repeatedly smashing my head against the wall now for the better half of 3 hours trying to figure something out.

I couldn't find any documentation on it either. I either don't know what to search, or it isn't possible anymore or something.

function modalCtrl($scope, $modal) {

    $scope.openManageMainCd = function() {
        var modalInstance = $modal.open({
            templateUrl: 'views/modalManageMainCd.html',
            controller: ModalInstanceCtrl
        });
    };
    $scope.openLadders = function(e) {

        alert(e);
        var modalInstance = $modal.open({
            templateUrl: 'views/ladderModal.html',
            controller: LadderInstanceCtrl
        });
    };
};    

function LadderInstanceCtrl($scope) {
    $scope.ladder = GetLadderData(_facilityData.holdings);
};

function GetLadderData(holdings){
    var holdingData = [];

    angular.forEach(holdings, function(value, key) {
        if (value.type == 'Ladder') {
             angular.forEach(value.cds, function(value, key) {
                var obj = { type: value.type, name: value.name, amount: value.amount, rate: value.rate, maturityDate: value.maturityDate }
                holdingData.push(obj);
             });
        }
    });
    return holdingData;
};

This big jumbled mess is what I have created with my time. When a row on my table is clicked, it calls the openLadders function. Right now, I've tried sending it everything under the sun, and none of it has helped so far. I want to send it basically the row. There is an ID I need from the row, I just want that ID. I've tried....

ng-click="openLadders(row) == function says row is undefined

ng-click="openLadders($event) == I have no idea what i am looking at

ng-click="openLadders($index) == Doesn't help me

and many more. Angular's website doesn't really go into detail with what I need to know so I was unable to find help there. I have went through two tutorials on Angular on websites which make me believe that it is possible.

Can anyone offer any shred of help here? I'm so lost.

The table is build like this:

<tr ng-repeat="holding in holdings" ng-if="holding.type == 'Ladder'" class="" ng-controller="modalCtrl" ng-click="openLadders()">
    <td><i class="icon-plus" ></i> {{holding.type}}</td>
    <td contenteditable="true">{{holding.name}}</td>
    <td>{{holding.maturityDate}}</td>
    <td>{{holding.amount | currency:"$"}}</td>
    <td>{{holding.rate | percentage:2}}</td>
</tr>

There seems to be an obvious follow up question that I will have, which will be sending that information once I get it from the function openLadders to the actual LadderInstanceCtrl(). So help on either topic would be severely appreciated.

Thank you so much.

Do you mind adding to the question details about how the table is build? Might help to see how the table is build to see what $scope item it is coming from and what is available. — h7r
– h7r, Commented Feb 13, 2015 at 19:11
Am I right to understand that exists a field holding.id that you want passed to openLadders ? — h7r
– h7r, Commented Feb 13, 2015 at 19:26
Please check my answer. As to the issue of passing to LadderInstanceCtrl, I'd suggest reading a bit about Services and Controllers. In Angular's model, openLadders would be in the controller, which would have a dependency (injection) to a LadderInstanceService (replacing your LadderInstanceCtrl). This is more an issue of understanding Angular's adequate application architecture than any specific problem you are facing. Best luck with Angular, which is indeed very good. — h7r
– h7r, Commented Feb 13, 2015 at 19:41

h7r · Accepted Answer · 2015-02-13 19:46:31Z

3

You are right saying that Angular has a learning curve, but is not so steep once one understands how scoping works.

You are very close to what you wanted, just needed to pass the exact field you needed as a parameter to the function, which might feel a bit different than pure javascript.

What you describe is solved with (note the ng-click directive):

<tr ng-repeat="holding in holdings" ng-if="holding.type == 'Ladder'" class="" ng-controller="modalCtrl" ng-click="openLadders(holding.id)">
    <td><i class="icon-plus" ></i> {{holding.type}}</td>
    <td contenteditable="true">{{holding.name}}</td>
    <td>{{holding.maturityDate}}</td>
    <td>{{holding.amount | currency:"$"}}</td>
    <td>{{holding.rate | percentage:2}}</td>
</tr>

It might be just as convenient, in similar situation, to pass the whole holding object with ng-click="openLadders(holding)". Might be instructive to try this too and see the behavior.

Hope this helps.

edited Feb 13, 2015 at 19:46

answered Feb 13, 2015 at 19:36

h7r

5,0732 gold badges30 silver badges31 bronze badges

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

2 Comments

Brian Over a year ago

Oh man.... You're amazing.... I swear I tried {{holding.id}} but never just holding.id. I feel so dumb. One step at a time though.

h7r Over a year ago

Basically {{ }} executes interpolation for output, and the content is interpreted by Angular. inside the ng-click directive (or any other for that matter), there's no need for interpolation, as the variables (from the $scope) are all available directly. I'm glad that it helped.

Collectives™ on Stack Overflow

Passing table row to function in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related