如何在AngularJS ng-repeat循環中顯示對象，僅當其嵌套圖像存在時才顯示該對象？

Question

我的AngulaJS驅動的前端從本地獲取數據JSON文件，稍後將切換到API。該數據是嵌套列表Image對象的Project對象的列表。我在一個循環中顯示此數據：

<div id="projects" ng-app="portfolio"> 
    <div id="projectsList" ng-controller="ProjectsListController as projectsList"> 
     <div class="projectItem" ng-repeat="projectItem in projectsList.projectsListData._embedded.projects"> 
      <div class="project-image"> 
       <img 
        ng-src="{{projectItem._embedded.images[0].src}}" 
        title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
        alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
       /> 
      </div> 
     </div> 
    </div> 
</div> 

但有時圖像src是無效的（錯誤404）。跳過這樣的項目會更好，因爲第一張圖片（images[0]）無法找到。如何讓腳本跳過不相關的對象？

---

編輯

我已經有三個答案，但解決方案不工作，我想確切地解釋這個問題：

圖像的src屬性是alwys組。這是不是的問題。這意味着，檢查是否設置（如ng-show="projectItem._embedded.images[0].src != ''"或ng-if="{{projectItem._embedded.images[0].src}}"）將而不是工作 - 無法工作。

它不起作用 - src屬性設置。這是錯誤的（將導致錯誤404），但它的設置和projectItem._embedded.images[0].src != ''將返回true爲「不相關」的對象。

Answer 1

這是一個哈克使這項工作的方式：

，以避免加載圖片時，他們拋出404錯誤或當圖像是無效的，

這必須在您的控制器內。該功能檢查圖像URL是否有效/無效。

$scope.imageExists = function(image, object, index) { 
    var img = new Image(); 
    img.onload = function() { 
     object[index] = true; 
     $scope.$apply(); 
    }; 
    img.onerror = function() { 
     return false; 
    }; 
    img.src = image; 
}; 

現在查看：

我發起對象在ng-repeat稱爲img={};。

然後將該索引的值ng-repeat初始化爲$scope.imageExists函數。在該功能內部，在該圖像加載成功時，設置爲img[index]= true。

<div ng-repeat="image in images" ng-init="img = {}"> 
    <img ng-src="{{image}}" ng-init="img[$index] = imageExists(image, img, $index)" ng-show="img[$index]"> 
</div> 

DEMO

所以把它應用到你的代碼：

<div id="projects" ng-app="portfolio"> 
    <div id="projectsList" ng-controller="ProjectsListController as projectsList"> 
     <div class="projectItem" ng-repeat="projectItem in projectsList.projectsListData._embedded.projects" ng-init="img = {}"> 
      <div class="project-image" ng-init="img[$index] = imageExists(projectItem._embedded.images[0].src, img, $index)" ng-show="img[$index]"> 
       <img 
        ng-src="{{projectItem._embedded.images[0].src}}" 
        title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
        alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
       /> 
      </div> 
     </div> 
    </div> 
</div> 

放置$scope.imageExists代碼從上面到控制器。

Answer 2

您可以使用ng-if

<div class="projectItem" ng-repeat="projectItem in projectsList.projectsListData._embedded.projects" ng-if="{{projectItem._embedded.images[0].src}}"> 
      <div class="project-image"> 
       <img 
        ng-src="{{projectItem._embedded.images[0].src}}" 
        title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
        alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
       /> 
      </div> 
     </div> 
    </div> 

或者你也可以使用NG-顯示/ NG隱藏它只是不顯示元素，但會出現在DOM。

但是在使用ng-if時要小心，因爲它會創建自己的作用域。

編輯：如果url已經設置，其中一個方法是檢驗是否存在URL中使用這個方法（或類似的事情）JavaScript/jQuery check broken links和
ng-if="UrlExists(projectItem._embedded.images[0].src)"

Answer 3

 <div class="project-image" ng-if="projectItem._embedded.images[0].src != ''"> 
      <img 
       ng-src="{{projectItem._embedded.images[0].src}}" 
       title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
       alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}" 
      /> 
     </div> 

Answer 4

你可以創建自己的形象指令：

<my-image src="http://someimageurl"></my-image> 

如果圖像存在，該指令將插入圖像到DOM。如果沒有，那麼你可以忽略它，或插入一條消息。

var app = angular.module('app', []); 
 
app.directive('myImage', function() { 
 
    return { 
 
    restrict: 'E', 
 
    replace:true, 
 
    link: function(scope, element, attr) { 
 
     var image = new Image(); 
 
     image.onload = function() { 
 
     element.append(image); 
 
     } 
 
     image.onerror = function() { 
 
     element.html('Something went wrong or the image does not exist...'); 
 
     } 
 
     image.src = attr.src; 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <my-image src="https://www.google.ca/images/srpr/logo11w.png" /> 
 
    
 
    <my-image src="https://server/images/doesnotexist.png" /> 
 
</div>