角度動態NG-SRC

我有雙重檢查了2個線程，其接近於同一主題提問前，角度動態NG-SRC

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圖標出現在我的頁面ALL我的NG-REPEAT系列，但由於某種原因，我覺得有點卡住了，希望能有一些新的眼睛幫助。

因爲我的JSON數據被從工廠推入到Object Constructor中，訪問我的Function中的IconOne值的最佳方法是什麼？

謝謝！

來源

2016-02-10 Phil Lucks

看起來像是你的問題$scope.mtnsArray.IconOnemtnsArray是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'; 
    } 
}

and use ng-src="{{mtns.imgURL}}

來源

2016-02-10 05:08:09 manoj

角度動態NG-SRC

回答

相關問題