0

私の AngulaJS 駆動のフロントエンドは、ローカルJSONファイルからデータを取得し、後で API に切り替えます。データは、ProjectオブジェクトのリストがネストされたImageオブジェクトのリストです。このデータをループで表示しています：

<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]最初の画像 ( ) が見つからないようなプロジェクトはスキップしたほうがよいでしょう。スクリプトが無関係なオブジェクトをスキップするようにする方法は?

編集

すでに 3 つの回答を得ていますが、解決策がうまくいかず、問題を正確に説明したいと思います。

画像のsrcプロパティは常に設定されています。それは問題ではありません。つまり、設定されているかどうか (ng-show="projectItem._embedded.images[0].src != ''"または などng-if="{{projectItem._embedded.images[0].src}}")のチェックは機能しません。機能しません。

機能しません-srcプロパティが設定されています。これは間違っています (404エラーの原因になります) が、設定されており、「無関係な」オブジェクトに対してもprojectItem._embedded.images[0].src != ''返されます。true

ここに画像の説明を入力

ここに画像の説明を入力

4

4 に答える 4

1

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>

または、要素を表示しないだけで DOM に存在する ng-show/ng-hide を使用することもできます。

ただし、独自のスコープを作成するため、ng-if を使用する場合は注意してください。

編集: URL が既に設定されている場合、1 つの方法は、このメソッド (またはこのようなもの) を使用して URL が存在するかどうかをテストすることです。
ng-if="UrlExists(projectItem._embedded.images[0].src)"

于 2015-04-04T11:23:12.787 に答える
0

独自のイメージ ディレクティブを作成できます。

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

于 2015-04-04T12:11:13.567 に答える
0 
        <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>
于 2015-04-04T11:26:02.167 に答える