Question

我希望能够切换三个图像中的一个（向上箭头，向下箭头或方形），具体取决于特定数字是上升，下降还是保持不变。

我有一个函数调用，允许我检查这个 - 但我想根据它设置img src和title属性。

目前这意味着两次调用该函数，每个属性调用一次。这不是我满意的解决方案。

有没有办法调用该函数一次，然后根据响应设置两个属性？

现有代码：

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

Answer 1

解决此问题的一种方法也可以是使用ngInit初始化新的范围变量。该指令采用角度表达式。

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

Answer 2

不，你不能通过1个函数调用设置2个属性。您有3个选项（我可以看到）来解决这个问题：

选项1 - 确保trendImage是一个轻量级函数，因此调用它的次数并不重要。

选项2 - 将src和title绑定到范围变量：

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

并在$ scope中调用trendImage。$ watch方法：

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

但我认为不会为你工作，因为你可能在页面上有很多这些元素

选项3 - 如果图像只能有3个可能的值，请将它们全部放在那里，然后使用ng-switch或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" />

（或类似的东西 - 在这种情况下$ scope.trendImage不需要返回一个对象，只有3个可能的值中的一个）

根据您的要求，选项3可能是最佳选择，其次是选项1.

如何使用Angular从单个函数调用中设置多个属性？

2 个答案: