控制台

Question

我的ng-repeat图像中出现了意想不到的问题。我只想根据其类型显示图像和PDF。 ** [

  

[]

我的代码是 的 codepen.io/anujsphinx/pen/GNepPE

我在控制台收到错误，请检查该问题

我的代码是

<div ng-repeat="media in docList" class="list">
           <div class="item item-avatar"  ng-if="media.docType == 'image'">
              <img  ng-src="{{media.docUrl}}">
              <h3>{{media.docName}}</h3> {{media.docUrl}}
           </div>
            <div class="item item-avatar" ng-click="Download({{media.docUrl}})" ng-if="media.docType == 'pdf'">
              <img  ng-src="https://cdn4.iconfinder.com/data/icons/file-extensions-1/64/pdfs-512.png" type='application/pdf'>
              <h3>{{media.docName}}</h3>{{media.docUrl}}
           </div>
        </div> 

js

  $scope.docList = [
            {id:1,docName: 'pic1.jpg',docUrl : 'http://3.bp.blogspot.com/-XchURXRz-5c/U5ApPOrPM9I/AAAAAAAADoo/YZEj4qeSlqo/s1600/Final-Fantasy-XV-Noctis-Red-Eyes.png' ,docType :'image'}, 
            {id:3,docName: 'dummy.pdf',docUrl : 'http://werkspoorkathedraal.nl/user-files/uploads/2015/02/dummy_pdf.pdf' ,docType :'pdf'}
            ];

Answer 1

试试这个，可能会有帮助，

<div ng-repeat="media in docList" class="list">
       <div class="item item-avatar"  ng-if="media.docType == 'image'">
          <img  ng-src="{{media.docUrl}}">
          <h3>{{media.docName}}</h3> {{media.docUrl}}
       </div>
        <div class="item item-avatar" ng-click="Download(media.docUrl)" ng-if="media.docType == 'pdf'">
          <img  ng-src="https://cdn4.iconfinder.com/data/icons/file-extensions-1/64/pdfs-512.png" type='application/pdf'>
          <h3>{{media.docName}}</h3>{{media.docUrl}}
       </div>
    </div>

Answer 2

你需要了解不同的角度指令采用不同的参数

当ng-src采用模板Interpolation {{}}作为参数时，ngclick将表达式作为参数，因此您无需在ng-click中指定{{}}。

在这里阅读更多内容。

https://docs.angularjs.org/api/ng/directive/ngSrc

https://docs.angularjs.org/api/ng/directive/ngClick

所以代码应该写成

<div class="item item-avatar" ng-click="Download(media.docUrl)" ng-if="media.docType == 'pdf'">

Answer 3

您的错误位于HTML第27行。将其更改为：

<div class="item item-avatar" ng-click="Download(media.docUrl)" ng-if="media.docType == 'pdf'">

Answer 4

在ng-click中永远不要使用{{}}

ng-click="Download({{media.docUrl}})"应为ng-click="Download(media.docUrl)"