當API返回空值時，如何更改AngularJS ng-src？

Question

在使用來自themoviedb.com的API時，我將用戶類型置於輸入字段中，並在每個鍵盤上發送API請求。在測試中，有時電影海報會是「空」而不是預期的海報路徑。我更喜歡默認使用佔位符圖片來表示未發現使用API​​請求的海報。

所以因爲整個poster_path網址不是由API提供的，由於我使用的是AngularJS NG重複，我已經構建像這樣（使用虛擬數據，以節省空間）的圖像標籤：

<img ng-src="{{'http://example.com/'+movie.poster_path}}" alt=""> 

但是，然後控制檯給我一個錯誤，因爲一個錯誤的請求，因爲完整的圖像路徑沒有返回。我嘗試使用OR提示：

{{'http://example.com/'+movie.poster_path || 'http://example.com/missing.jpg'}} 

但是，在這種情況下不起作用。所以現在用javascript。我似乎無法通過使用getElementsByTagName或getElementByClass來獲取圖像源，並且使用getElementById似乎只抓取第一個重複，而沒有其他任何東西，我認爲是這種情況。但即使如此，我似乎無法取代圖像源。下面是代碼結構，我嘗試：

<input type="text" id="search"> 
<section ng-controller="movieSearch"> 
    <article ng-repeat="movie in movies"> 
    <img id="myImage" src="{{'http://example.com/'+movie.poster_path}}" alt=""> 
    </article> 
</section> 

<script> 
function movieSearch($scope, $http){ 
    var string, 
     replaced, 
     imgSrc, 
     ext, 
     missing; 

    $(document).on('keyup', function(){ 
    string = document.getElementById('search').value.toLowerCase(); 
    replaced = string.replace(/\s+/g, '+'); 
    $http.jsonp('http://example.com/query='+replaced+'&callback=JSON_CALLBACK').success(function(data) { 
     console.dir(data.results); 
     $scope.movies = data.results; 
    }); 
    imgSrc = document.getElementById('myImage').src; 
    ext = imgSrc.split('.').pop(); 
    missing='http://example.com/missing.jpg'; 
    if(ext !== 'jpg'){ 
     imgSrc = missing; 
    } 
    }); 
} 
</script> 

與我做錯了任何想法，或者什麼，我試圖甚至可以在全部完成？

Answer 1

我看到的第一個問題是，當您設定的異步回調movies，你正在尋找的圖像源同步這裏：

$http.jsonp('http://domain.com/query='+replaced+'&callback=JSON_CALLBACK').success(function(data) { 
    console.dir(data.results); 
    $scope.movies = data.results; 
}); 

// This code will be executed before `movies` is populated 

imgSrc = document.getElementById('myImage').src; 
ext = img.split('.').pop(); 

然而，僅僅移動代碼到回調不能解決問題：

// THIS WILL NOT FIX THE PROBLEM 

$http.jsonp('http://domain.com/query='+replaced+'&callback=JSON_CALLBACK').success(function(data) { 
    console.dir(data.results); 
    $scope.movies = data.results; 

    // This will not solve the issue 

    imgSrc = document.getElementById('myImage').src; 
    ext = img.split('.').pop(); 
    // ... 
}); 

這是因爲src字段將僅在未來digest loop進行填充。

在你的情況，你應該儘快你從JSONP回調接收它們修剪結果：

function movieSearch($scope, $http, $timeout){ 
    var string, 
     replaced, 
     imgSrc, 
     ext, 
     missing; 

    $(document).on('keyup', function(){ 
    string = document.getElementById('search').value.toLowerCase(); 
    replaced = string.replace(/\s+/g, '+'); 
    $http.jsonp('http://domain.com/query='+replaced+'&callback=JSON_CALLBACK').success(function(data) { 
     console.dir(data.results); 
     $scope.movies = data.results; 

     $scope.movies.forEach(function (movie) { 
     var ext = movie.poster_path && movie.poster_path.split('.').pop(); 

     // Assuming that the extension cannot be 
     // anything other than a jpg 
     if (ext !== 'jpg') { 
      movie.poster_path = 'missing.jpg'; 
     } 
     }); 
    }); 
    }); 
} 

在這裏，你只修改model後面查看，不要做任何事後DOM分析找出失敗。

---

旁註：您也可以使用三元運算符來解決視圖問題，但不建議這樣做：

<!-- NOT RECOMMENDED --> 
{{movie.poster_path && ('http://domain.com/'+movie.poster_path) || 'http://domain.com/missing.jpg'}} 

Answer 2

首先，我定義了這樣的過濾器：

在CoffeeScript的：

app.filter 'cond',() -> 
    (default_value, condition, value) -> 
     if condition then value else default_value 

還是在JAV aScript：

app.filter('cond', function() { 
    return function(default_value, condition, value) { 
     if (condition) { 
     return value; 
     } else { 
     return default_value; 
     } 
    }; 
    }); 

然後，您可以使用它像這樣：

{{'http://domain.com/missing.jpg' |cond:movie.poster_path:('http://domain.com/'+movie.poster_path)}}