Question

在询问之前，我已经仔细检查了两个接近同一主题的主题，

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

但我不确定这些答案是＆＃34;最佳实践＆＃34; - 例如在HTML的true中定义false - {{}}语句。

关于我的问题：
我正在尝试根据对象数组加载图像，这样当Key:Value pair "IconOne = 1"加载icon1，"IconTwo = 2"时，它会加载icon2。 Value是从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行的{{1}}图标，但我觉得有点卡住了某些原因，我希望有一双新的眼睛可以提供帮助。

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

谢谢！

Answer 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}}

角动态ng-src基于数据值

1 个答案: