If I have AngularJS HTML that creates a table like this:

<tbody>
   <tr data-ng-repeat="row in grid.data">
      <td>{{ row.id }}</td>
      <td>{{ row.text }}</td>
   </tr>
</tbody>

How could I add in functionality so that one click on a row makes just that row highlighted and two clicks calls a function with the row.id? Is there an AngularJS way to do this or would I have to use jQuery? I suspect the only way to do this is with jQuery but feel I should ask as an AngularJS question first.

Thanks

If I have AngularJS HTML that creates a table like this:

<tbody>
   <tr data-ng-repeat="row in grid.data">
      <td>{{ row.id }}</td>
      <td>{{ row.text }}</td>
   </tr>
</tbody>

How could I add in functionality so that one click on a row makes just that row highlighted and two clicks calls a function with the row.id? Is there an AngularJS way to do this or would I have to use jQuery? I suspect the only way to do this is with jQuery but feel I should ask as an AngularJS question first.

Thanks

• javascript
• jquery
• html
• angularjs

• 3 You can use ngClick and ngDblclick. Can you provide a plunker or jsfiddle? – Satpal Commented Jan 6, 2014 at 9:31
• Would I need to put that on each cell or could I put it on the row? – Samantha J T Star Commented Jan 6, 2014 at 9:32
• I just realized. With one click I want to just make the one row I click on highlighted and remove any previous highlight. I think that might be more difficult to achieve. – Samantha J T Star Commented Jan 6, 2014 at 9:34

4 Answers 4

I found below from Jquery's website:

" It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. "

It's better you can find another way to implement it, such as using the mouse hover and click event togather but not click and double click togather.

The best way to go would probably be to go there first:

Handling ng-click and ng-dblclick on the same element with AngularJS

in order to deal with the single and double click issue. look here: http://plnkr.co/edit/on260PrRZ5mZqHOK6NXW?p=preview

Angular itself has a built-in [ng-click][1] directive.

I would consider using this. However, you will have to build the double-click feature by yourself, i guess.

This should pe pretty simple and could be bined with the ng-click fired function. Just wait x seconds to determine whether or not the user has done 2 clicks.

Edit: Mea culpa, i had no idea about ngdblclick

i think this works

html

       <tr ng-repeat="x in Humans" ng-dblclick="ReadId(x.Id)" >
            <td>{{x.Id}}</td>
            <td>{{x.Name}}</td>
            <td>{{x.Family}}</td>
            <td>{{x.Age}}</td>
        </tr>

javascript angular

        var z;
        $scope.ReadId = function (d) {
            z = d;
        }