基于数据值的角度动态ng-src答案

【问题标题】：angular dynamic ng-src based on data value基于数据值的角度动态ng-src
【发布时间】：2016-05-20 07:58:07
【问题描述】：

在提问之前，我已经仔细检查了接近同一主题的 2 个线程，

How to define ng-src based on condition?
Conditionally change img src based on model data

但我不确定这些答案是否是“最佳实践”——例如在 HTML 的 {{}} 中定义 true-false 语句。

关于我的问题：
我正在尝试加载基于对象数组的图像，这样当Key:Value pair "IconOne = 1" 它加载icon1、"IconTwo = 2" 它加载icon2。该值是从 JSON 文件生成的，因此 IconOne 也可以是 1、2、3 或 4，因此它永远不会一致。

我当前的 HTML 代码是：

<ul class="snowSnapText" ng-repeat="mtns in mtnsArray | orderBy:'-lastSnow' | limitTo: 5 ">
      <li><img alt="ski resort logos" class="mtnLogo" ng-src="{{mtns.logoUrl}}"></li>
      <li class="snowSnapName">{{mtns.name}}</li>
      <li class="snowSnapInches">{{mtns.lastSnow}}"</li>
      <li class="snowSnapDeg">{{mtns.hi}}&deg</li>
      <li class="snowSnapIcon"><img alt="weather icon" ng-src="{{getIcons()}}">{{mtns.IconOne}}</li>

我当前的 JS 控制器看起来像：

$scope.getIcons = function(){
if($scope.mtnsArray.IconOne == 1){
    return '../img/icon_sunny.png';
}
else if($scope.mtnsArray.IconOne == 2){
    return '../img/icon_sunny.png';
}
else if($scope.mtnsArray.IconOne == 3){
    return '../img/icon_sunny.png';
}
else {
    return '../img/icon_snow.png';
}
};

我能够让ELSE 图标出现在我的所有NG-REPEAT 行的页面中，但由于某种原因我感觉有点卡住，希望新的眼睛能提供帮助。

因为我的 JSON 数据是从工厂推送到对象构造函数中的，所以在我的函数中访问 IconOne 值的最佳方法是什么？

谢谢！

【问题讨论】：

标签： angularjs

【解决方案1】：

看起来问题在于您的 $scope.mtnsArray.IconOne mtnsArray 是 array 而不是 object ？

当它是一个数组时，您不能使用点 (.) 获取值

像这样重新编写你的代码：

使用ng-src="{{getIcons(mtns)}}

$scope.getIcons = function(mtns){
 if(mtns.IconOne == 1){
    return '../img/icon_sunny.png';
 }
 else if(mtns.IconOne == 2){
    return '../img/icon_sunny.png';
 }
 else if(mtns.IconOne == 3){
    return '../img/icon_sunny.png';
 }
 else {
    return '../img/icon_snow.png';
 }
};

或在页面加载时执行以下操作

 for(var i = 0 ; i < $scope.mtnsArray.length ; i++ ){

    if($scope.mtnsArray[i].IconOne == 1){
        $scope.mtnsArray[i].imgURL =  '../img/icon_sunny.png';
    }
    else if($scope.mtnsArray[i].IconOne == 2){
        $scope.mtnsArray[i].imgURL =  '../img/icon_sunny.png';
    }
    else if($scope.mtnsArray[i].IconOne == 3){
        $scope.mtnsArray[i].imgURL =  '../img/icon_sunny.png';
    }
    else {
        $scope.mtnsArray[i].imgURL =  '../img/icon_snow.png';
    }
}

并使用ng-src="{{mtns.imgURL}}

【讨论】：