AngularJS: ng-repeat, ng-hover, ng-click

So I’ve been diving into AngularJS lately, and am finding that it’s pretty awesome.  It feels more comfortable than backbone.js – most likely due to my Flex background.  I like the way ‘directives’ act similarly to Flex components, and two-way binding just works automagically.  Anyway, I’m converting my House of Mews Petfinder widget from Flex to Angular, and will post lots of code from that later.  But for now, here’s a tiny demo I threw together in jsFiddle. You can hover and click on list items, and stuff happens! (OK, so my real motivation for posting this was to test jsFiddle embedding. It works, and it’s sweet.)


  1. mouse over correctly shows “three” when you are over three … but what about when you are NOT over one,two or three? should it still say “three”? you are NOT over three.

  2. For that type of behavior you would want to use ng-mouseenter and ng-mouseout to detect when the mouse pointer enters and leaves a region. Creating a callback for ng-mouseout that sets $scope.msg = “” would do the trick.

  3. Great and easy ! Thanks for this example !!

Leave a Reply

Your email address will not be published.


© 2016 Eric Terpstra

Theme by Anders NorenUp ↑