How to get the data of the clicked row in Angular JS

Question

I have a few table rows and in the last column of the respective rows there are two operations that can be performed.

        <div class="embedded-list-table-wrapper embedded-medium migration-status-list-container">
            <table class="list-table embedded-list-table no-truncate-td">
                <thead>
                    <tr>
                        <th>
                            <a href="#list-table" class="table-sort table-sort-desc">
                                <span class="table-sort-text">Account Name</span>
                                <span class="table-sort-indicator"></span>
                            </a>
                        </th>
                        <th>
                            <a href="#list-table" class="table-sort table-sort-desc">
                                <span class="table-sort-text"># Batches Completed</span>
                            </a>
                        </th>

                        <th style="width:123px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in vm.items | limitTo : vm.pageSize : (vm.currentPage-1)*vm.pageSize">
                        <td class="table-link"><a  class="ng-binding" href="" target="_blank" ng-click="vm.setTenantId($event)">{{item.accountName}}</a></td>
                        <td class="table-text ng-binding">{{item.completedBatches}}</td>
                        <td class="table-input">
                            <div class="btn-group">
                                <div class="dropdown">
                                    <div class="cog dropdown-toggle" ng-click="batch.showSettings = !batch.showSettings"></div>
                                    <ul class="dropdown-menu visible" ng-show="batch.showSettings">
                                        <li><span class="dropdown-category">Manage</span></li>
                                        <li class=""><a href="" ng-click="vm.removeAccount(item.accountName)">Remove from Panel</a></li>
                                        <li class=""><a href="#" ng-click="vm.setEncoreLink()">View</a></li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

Now this <a>" in View button will redirect me to a url that will look something like https://encore.rackspace.com/accounts/<tenant-id> . The <tenant-id> will come from first column Account Name value that we can split something like :

            vm.setEncoreLink = function($event){
                debugger;
                var tenant_id_text = $event.currentTarget.text;
                var tenant_id = tenant_id_text.substring(tenant_id_text.lastIndexOf("#")+1,tenant_id_text.lastIndexOf(")"));
                var encoreUrl = "https://encore.rackspace.com/accounts/"+tenant_id;
                $window.location.href=encoreUrl;
            }

Provided the $event is passed from the first column value. How to access that and pass that so that tenant_id can be accessed ? Or is there any other way out ?

I'm a little confused. Where in your scope has the tenant_id to start with? Is it in the item you're rendering? — Paul
– Paul, Commented Feb 17, 2017 at 21:33
@Paul there is no tenant id. We have to derive it from first column value. If we can get the first column value text an we can pass it to the function, we can split and get it accordingly there. — StrugglingCoder
– StrugglingCoder, Commented Feb 17, 2017 at 21:34
Why would you not just pass item to your setEncoreLink method so you can access its properties directly without having to try to do some crazy stuff with $event? BTW, you're not passing $event from your view so in the setEncoreLink method it will always be undefined. — Lex
– Lex, Commented Feb 17, 2017 at 21:39

Paul · Accepted Answer · 2017-02-17 21:39:55Z

Ok, so it looks to me like the text you're trying to derive from is actually '{{item.accountName}}', correct? Also you weren't actually explicit, but from your sample code I'm assuming you're trying to do the setEncoreLink function.

So given that you can just do this:

<li class=""><a href="#" ng-click="vm.setEncoreLink(item)">View</a></li>

And then your function can be

vm.setEncoreLink = function(item){
                debugger;
                var tenant_id_text = item.accountName;
                var tenant_id = tenant_id_text.substring(tenant_id_text.lastIndexOf("#")+1,tenant_id_text.lastIndexOf(")"));
                var encoreUrl = "https://encore.rackspace.com/accounts/"+tenant_id;
                $window.location.href=encoreUrl;
            }

Collectives™ on Stack Overflow

How to get the data of the clicked row in Angular JS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related