How can I add a click and double click control to a row with AngularJS?

Question

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

You can use ngClick and ngDblclick. Can you provide a plunker or jsfiddle? — Satpal
– 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
– 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
– Samantha J T Star, Commented Jan 6, 2014 at 9:34

Sheldon Papa · Accepted Answer · 2014-01-06 10:36:27Z

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.

answered Jan 6, 2014 at 10:36

Sheldon Papa

1601 silver badge13 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:02:27Z

3

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

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Jan 6, 2014 at 9:39

Mikael

2,3951 gold badge23 silver badges45 bronze badges

Comments

Wottensprels · Accepted Answer · 2014-01-06 09:31:26Z

2

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 combined 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

answered Jan 6, 2014 at 9:31

Wottensprels

3,3273 gold badges31 silver badges39 bronze badges

2 Comments

Samantha J T Star Over a year ago

How could I make it so only the row I click on is highlighted and all other rows lose highlight. Do you think this could be done with Angular?

Wottensprels Over a year ago

Of course. I would begin with creating a directive that fits your needs. This directive could, for example, share scope with all instances and you could add and remove some css class attributes on click. There are a lot of ways to accomplish this, though. If you are unfamiliar with directives, i strongly recommend some lecture on the topic :)

Sina Sheydari · Accepted Answer · 2023-04-10 20:52:39Z

0

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;
        }

answered Apr 10, 2023 at 20:52

Sina Sheydari

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How can I add a click and double click control to a row with AngularJS?

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related