6

いくつかの製品画像を表示する次のコードがあるとします。

<ul>
  <li ng-repeat="p in products">
    <img ng-src="/images/{{p.img}}"/>
  </li>
</ul>

残念ながら、一部の製品に画像がない場合は、次の方法で修正できます。

<ul>
  <li ng-repeat="p in products">
    <img ng-hide="p.img==undefined" ng-src="/images/{{p.img}}"/>
  </li>
</ul>

次に、firebug または chrome 開発者ツールの「ネットワーク」タブに移動し、画像のダウンロードを確認します。ブラウザが存在しない画像をダウンロードしようとしたため、エラーが表示されます。それは隠されているのでユーザーは気づきませんが、もちろん悪いことです: 悪い習慣、サーバーのパフォーマンスに悪い、悪い悪い悪い...

これに対する正しい「角度」ソリューションは何ですか?

4

3 に答える 3

4

@Arunのソリューションに代わるものは、ng-hide/ng-show とは異なり、DOM 要素を追加/削除するng-switchまたはng-if (v1.1.5 で利用可能) を使用することです。

<ul>
  <li ng-repeat="p in products">
    <span ng-switch="p.img==undefined">
      <img ng-switch-when="false" ng-src="/images/{{p.img}}"/>
    </span>
  </li>
</ul>

ng-if を使用した例については、@Rob の回答を参照してください。

于 2013-03-16T16:29:21.860 に答える
1

次のようなことができます

<ul>
    <li ng-repeat="p in products | imgsrc">
        {{p.img}}
        <img ng-src="/images/{{p.img}}"/>
    </li>
</ul>


app.filter('imgsrc', function(){
    return function(data){
        var a = [];
        angular.forEach(data, function(v, i){
            if(v.img){
                a.push(v);
            }
        });
        return a;
    }
});

デモ:フィドル

于 2013-03-16T15:50:37.900 に答える