Get row clicked in a table - AngularJS

Question

I have the following HTML Code. This is a table that fetches a list of items from costList and displays them in different rows. I want the item value to be displayed on the row click. How do I implement it in Angular. Thank You in advance.

    <table>
        <tr ng-click = "displayItem()" ng-repeat = "item in costList">
            <td>{{item}}</td>
        </tr>
    </table>

You can pass the item as a parameter in your displayItem() function like this displayItem(item) and use it — Vivz
– Vivz, Commented Jun 16, 2017 at 13:05

daan.desmedt · Accepted Answer · 2017-06-16 13:07:26Z

1

ng-click="displayItem(item)"

or you can store the item in displayItem.

$scope.displayItem = function (item) { $scope.currentItem = item; }

<div>{{currentItem}}</div>

edited Jun 16, 2017 at 13:07

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

answered Jun 16, 2017 at 13:07

gauravmuk

1,62614 silver badges20 bronze badges

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

1 Comment

Prateek Agarwal Over a year ago

that was Easy ! Thanks Man

Kyle · Accepted Answer · 2017-06-16 13:08:09Z

0

It depends on what you mean by "I want the item value to be displayed on the row click". If you just want it to appear when the row is clicked, try this:

HTML

<table>
  <tr  ng-repeat = "item in costList">
    <td ng-click="display = !display">
      <span ng-show="display">{{item}}</span>
    </td>
  </tr>
</table>

Plunkr: https://plnkr.co/edit/BSjv4Bv7Ouf4Y49cAtgx?p=preview

answered Jun 16, 2017 at 13:08

Kyle

6,5276 gold badges44 silver badges56 bronze badges

Comments

Sreehari S · Accepted Answer · 2017-06-16 13:12:42Z

0

 <table>
        <tr ng-click = "selectedItem = item" ng-repeat = "item in costList">
            <td>{{selectedItem}}</td>
        </tr>
    </table>

answered Jun 16, 2017 at 13:12

Sreehari S

3881 silver badge12 bronze badges

1 Comment

Badacadabra Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Collectives™ on Stack Overflow

Get row clicked in a table - AngularJS

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related