Dynamic variables angular ng-repeat

Question

I would like to be able to display some overlay when you focus on an img element. The problem is that the elements are populated from the attributes of an angularjs ng-repeat I would like only a specific img to enable a specific text.

The below example does not work, the ng-class variable resolves correctly though.

<div class="myClass" ng-repeat="i in items">
 <span class="class-img-wrapper">
  <img ng-src="{{i.img}}"  class="class-img-view" ng-init="{{i.name}}_focused = false" ng-focus="{{i.name}}_focused = true" ng-blur="{{i.name}}_focused = false"/>
  <span ng-class="{classOverlayShow: {{i.name}}_focused}" class="class-img-overlay">
    {{i.name}}
  </span>
 </span>
</div>

doesn't work really isn't very informative. We can't see data, or controller, or know what is or isn't happening....show more code and create a demo that replicates problem — charlietfl
– charlietfl, Commented Nov 20, 2013 at 21:17
explain what you expect the ng-class to do based on name? Not making sense without explanation. No idea what _focused is about. Right side of ng-class needs to resolve to true/false — charlietfl
– charlietfl, Commented Nov 20, 2013 at 21:51
also need to improve css selector specificity jsfiddle.net/Zrj9R/4 — charlietfl
– charlietfl, Commented Nov 20, 2013 at 22:00
if you look at the fiddle jsfiddle.net/Zrj9R/3 you can see that the ng-class value is resolved to a variable named bob_focused or frank_focused but the ng-init, ng-focus and ng-blur do not — Alex Edwards
– Alex Edwards, Commented Nov 20, 2013 at 22:00

musically_ut · Accepted Answer · 2013-11-20 22:45:15Z

1

That does not look like valid syntax to me:

<span ng-class="{classOverlayShow: {{i.name}}_focused}" class="class-img-overlay">

It should read something along the lines of:

 <span ng-class="{classOverlayShow: i.name + '_focused' }" class="class-img-overlay">

Why not add the focussed field to your models in items?

Instead of ng-init="{{i.name}}_focused = false" and then using ng-focus="{{i.name}}_focused = true" ng-blur="{{i.name}}_focused = false" to create dynamic variables on the fly (which I suspect doesn't work because it isn't valid angular syntax), do this instead:

Controller

$scope.items.forEach(function (i) {
    i.focussed = false;
});

$scope.setOverlay = function (item) {
    item.focussed = true;
};

$scope.removeOverlay = function (item) {
    item.focussed = false;
};

Template

<div class="myClass" ng-repeat="i in items">
 <span class="class-img-wrapper">
  <img ng-src="{{i.img}}"  class="class-img-view" ng-focus="setOverlay(i)" ng-blur="removeOverlay(i)"/>
  <span ng-class="{classOverlayShow: i.focussed }" class="class-img-overlay">
    {{i.name}}
  </span>
 </span>
</div>

However, angular documentation suggests that the ngFocus directive works only for input, textarea, select, window and a tags. So for focus events, you may have to create your own directive and bind to onfocus events yourself, or switch to simpler and more ubiquitous ng-click.

edited Nov 20, 2013 at 22:45

answered Nov 20, 2013 at 21:31

musically_ut

34.3k9 gold badges98 silver badges110 bronze badges

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

4 Comments

Alex Edwards Over a year ago

thanks i updated that part, although it is not valid it does work!

musically_ut Over a year ago

I have suggested a more angular-esque solution.

musically_ut Over a year ago

@AlexEdwards Did you notice the update to the answer?

Alex Edwards Over a year ago

Yes but I ran out of time to look at it, sometime this weekend hopefully, thank you

Collectives™ on Stack Overflow

Dynamic variables angular ng-repeat

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related