CODEWITHSUNDEEP
javascriptangularjs
Prateek Agarwal
Prateek Agarwal

Reputation: 20

Get row clicked in a table - AngularJS

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>

Upvotes: 0

Views: 284

Answers (3)

Sreehari S
Sreehari S

Reputation: 388

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

Upvotes: 0

Kyle Krzeski
Kyle Krzeski

Reputation: 6527

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

Upvotes: 0

gauravmuk
gauravmuk

Reputation: 1616

ng-click="displayItem(item)"

or you can store the item in displayItem.

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

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

Upvotes: 1

Related Questions