angularjs - 如何使用angularjs真正防止元素被放入DOM

Question

假设您有以下代码来显示一些产品图像：

<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 开发人员工具的“网络”选项卡并检查图像下载——你会看到错误，因为浏览器仍然试图下载不存在的图像。它是隐藏的，用户不会注意到，但这当然是不好的：不好的做法，对服务器性能不好，坏坏坏...

什么是正确的“角度”解决方案？

Answer 1

@Arun解决方案的替代方法是使用ng-switch或ng-if（在 v1.1.5 中可用），它们添加/删除 DOM 元素，这与 ng-hide/ng-show 不同：

<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 的答案。

Answer 2

使用 1.1.5 版，您可以使用 ng-if，正如@Abilash 建议的那样：

<img ng-if="p.img" ng-src="/images/{{p.img}}"/>

Answer 3

你可以做类似的事情

<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;
    }
});

演示：小提琴