ng-click on ng-repeat items not happening

[Michael Bielski]

I can't seem to get the ng-click event to happen in this block:

<div class="row-fluid lookuppane">

<table ng-repeat="thisCustomer in customerList.customers" ng-click="selectCustomer()" class="table-bordered searchResult">

<tr>

<td><strong>Last Name:</strong> {{ thisCustomer.customer.last_name }}</td>

<td><strong>First Name:</strong> {{ thisCustomer.customer.first_name }}</td>

<td><strong>Active:</strong> {{ thisCustomer.customer.active }}</td>

</tr>

<tr>

<td><strong>Address 1:</strong> {{ thisCustomer.customer.primary_address_line_1 }}</td>

<td><strong>Phone:</strong> {{ thisCustomer.customer.primary_phone_no }}</td>

<td><strong>E-Mail:</strong> {{ thisCustomer.customer.email_address }}</td>

</tr>

<tr>

<td><strong>Address 2:</strong> {{ thisCustomer.customer.primary_address_line_2 }}</td>

<td><strong>Created Date:</strong> {{ thisCustomer.customer.created_datetime }}</td>

<td><strong>ID:</strong> {{ thisCustomer.customer.customer_id }}</td>

</tr>

</table>

</div>

The repeater works like a charm, but in each instance I can't seem to get the click event to happen. I tried wrapping the table in a div and putting the repeater/click on the div but got the same result of the click not happening. I even tried a jQuery.click() event handler on the table, and on the div when present, but neither of those ever fired. I suspect that this has something to do with the clicks happening in the TD instead of the TABLE, but I could be wrong. Am I?

[Pawel Kozlowski]

hi!

It should work OK. Could you send a jsFiddle so we can see what is going on?

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

[Will Kriski]

we'd have to see the controller in the html and the selectCustomer() function in the controller.

[Michael Bielski]

Yeah, I thought it should work too. After some poking around, turns out it is! It's just my trying to find a DOM item inside that isn't. Fun. Thanks anyway!

[Michael Bielski]

Ok, so I'm still stumped on this. I can get the click event to happen just fine (an alert() will appear when you click on an item, so I know the clicks are happening,) but actually manipulating the tag that called the event is eluding me. I need to remove a class from all of the items in the repeater (make all of them Not selected) and then add a class to the item that was clicked (make it stand out as being selected.) There's probably an example somewhere, but I haven't found it yet. Could someone point me to an example?

[Will Kriski]

I found this jsfiddle which may help you for turning on and off classes when something is selected - http://jsfiddle.net/rur_d/tNZAm/

It uses the ng-class directive.

Will

[Michael Bielski]

Whoa... that's cool! Thanks!

[constrai...@gmail.com]

Hi, I have the same problem and I created a Fiddle to explain it: http://jsfiddle.net/nj7mK/2/
without a ng-repeat, that works... but I need this repeat.
Any idea?

Thanks

[Will Kriski]

You didn't add the angular library or body ng-app directive to the jsfiddle

[Pawel Kozlowski]

hi!

It doesn't work in ngRepeat since ngRepeat is creating a new scope.
Here is the working version: http://jsfiddle.net/pkozlowski_opensource/DHvLL/3/

And BTW: your fiddle was badly configured, AngularJS was not even kicking-in....

Cheers,
Pawel

[Thomas Desfossez]

Sorry -_-'
The update : http://jsfiddle.net/nj7mK/8/

[Thomas Desfossez]

Thanks Pawel! it was the first time I used jsFiddle. Now I will use it correctly.  

[Alec Sorensen]

Is this an issue people have solved?  I find myself having the same problem when using ng-click inside of ng-repeat.  Here's an example where I hard-code my list of links, not using ng-repeat, and it works: http://jsfiddle.net/V5Sn4/1/.  However, when I use ng-repeat to loop through properties of an object, ng-click ceases to work: http://jsfiddle.net/THy76/2/.  There must be some funky timing issue (i.e., ng-clicks are somehow evaluated before ng-repeat), but I have no clue what the 'right' way is.

P.S.  Noticed same question on stackoverflow, w/o answer -- this seems to be problematic for a lot of people starting out in Angular.

[Pawel Kozlowski]

Hi!

The recurring problem is that people tend to put curly braces in event
handlers, i.e.:

<a ng-click="chooseObject('{{key}}')">{{key}}</a>

while it should be:

<a ng-click="chooseObject(key)">{{key}}</a>

After this change the jsFiddle works as expected: http://jsfiddle.net/wfE7v/

There is no general problem of event handlers (ng-click etc.) with
ng-repeat, really, those are just syntax errors.

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.

> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.

>
> To post to this group, send email to ang...@googlegroups.com.

> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>



--
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Alec Sorensen]

Thanks, I thought I'd tried that, but I must have had some other error when I did.  Thanks for the help.

[yash maharshi]

as said by Pawel Kozlowski , its working in smooth

[yash maharshi]

thank you Pawel Kozlowski , it worksss.....