How do I set multiple attributes from a single function call, using Angular?

Question

I want to be able to switch in one of three images (an up arrow, down arrow, or square) depending on whether a particular number has gone up, gone down, or stayed the same.

I have a function call that allows me to check this - but I want to set both the img src and the title attribute based on it.

At the moment this means calling the function twice, once for each attribute. Which isn't a solution I'm happy with.

Is there any way to call the function once and then set both attributes based on the response?

Existing code:

<img src="{{trendImage(metric.scoreCardPassed, metric.scoreCardTrend).image}}" 
   title="{{trendImage(metric.scoreCardPassed, metric.scoreCardTrend).description}}">

Bogdan Rybak · Accepted Answer · 2014-07-02 15:28:00Z

2

One way of solving this could be also using ngInit to initialize a new scope variable. This directive takes in angular expressions.

<img ng-init="trendDetails = trendImage(metric.scoreCardPassed, metric.scoreCardTrend)" ng-src="{{trendDetails.image}}" title="{{trendDetails.description}}">

edited Jul 2, 2014 at 15:28

answered Jul 2, 2014 at 15:04

Bogdan Rybak

2,1171 gold badge19 silver badges22 bronze badges

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

1 Comment

jkjustjoshing Over a year ago

Note that this is really the only time you should ever use ng-init in non-test code. From the documentation "The only appropriate use of ngInit is for aliasing special properties of ngRepeat".

jkjustjoshing · Accepted Answer · 2014-07-02 14:59:22Z

1

Nope, you can't set 2 attributes with 1 function call. You have 3 options (that I can see) to solve this:

Option 1 - Make sure that trendImage is a lightweight function so it doesn't matter how many times you call it.

Option 2 - Bind the src and title to a scope variable:

<img ng-src="metric.image" title="{{metric.description}}" />

and call trendImage in a $scope.$watch method:

$scope.$watch(function() {return trendImage(metric);}, function(newValue) {
  $scope.metric = newValue;
});

but I presume that won't work for you because you probably have a bunch of these elements on the page

Option 3 - If the image could only have 3 possible values, put them all there, and switch between them with an ng-switch or ng-if:

<img ng-if="trendImage(metric.scoreCardPassed, metric.scoreCardTrend).image == 'up-arrow.png'" src="up-arrow.png" title="Up Arrow" />
<img ng-if="trendImage(metric.scoreCardPassed, metric.scoreCardTrend).image == 'down-arrow.png'" src="down-arrow.png" title="Down Arrow" />
<img ng-if="trendImage(metric.scoreCardPassed, metric.scoreCardTrend).image == 'square.png'" src="square.png" title="Square" />

(or something like that - in this case $scope.trendImage wouldn't need to return an object, just 1 of 3 possible values)

Based on what you asked, Option 3 probably is the best option, followed by option 1.

answered Jul 2, 2014 at 14:59

jkjustjoshing

3,7104 gold badges23 silver badges23 bronze badges

2 Comments

Andrew Ducker Over a year ago

If I have four options there, would using ng-switch work better?

jkjustjoshing Over a year ago

In terms of performance I'm not sure, but it shouldn't make a difference. Using ng-switch may be better for readability. If you go with ng-switch and you aren't using Angular 1.2 be sure you create a separate parent element for your <img> tags (see Github issue).

Collectives™ on Stack Overflow

How do I set multiple attributes from a single function call, using Angular?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related