CODEWITHSUNDEEP
jqueryhtmlangularjstypescript
gwhiz
gwhiz

Reputation: 13

How to retrieve the tr element upon clicking a td element from typescript?

In my html file: 

<tbody id="tableBody">
     <tr ng-repeat="item in redirectsCtrl.csvData">
          <td style="text-align:center;">{{item.sourceURL}}</td>
          <td style="text-align:center;">{{item.redirectURL}}</td>
          <td style="text-align:center;" ng-click="redirectsCtrl.onEditButtonClick()"><i class="glyphicon glyphicon-pencil"></i></td>
          <td style="text-align:center;"><i class="glyphicon glyphicon-trash"></i></td>
     </tr>
</tbody>

In my typescript file (the angularjs controller function)

public onEditButtonClick() {}

To clarify, the edit button is basically designed so that I can edit an entry in a row of the table and as such I need access to the row's entries. So when I click the edit button I need its associated tr element, however, I can't use $(this) to retrieve the clicked element (and by definition its parent) in typescript because of contextual scoping.

Any help would be greatly appreciated!

Upvotes: 0

Views: 575

Answers (1)

asdf_enel_hak
asdf_enel_hak

Reputation: 7650

As angular is mvc framework you can manipulate on data in controller and not view, simply: return this line:

<td ng-click="redirectsCtrl.onEditButtonClick()">...</td>

to: 

<td ng-click="redirectsCtrl.onEditButtonClick(item)">...</td>

and in your controller do your stuff:

 onEditButtonClick(item) {
    item.someProp = "someValue"
  }

Upvotes: 1

Related Questions