使用ng-repeat显示pdf文件

Question

我正在尝试使用ng-repeat显示PDF文件，我收到以下错误：

  

HTTP错误404.0

如果我显示单个pdf，一切正常。 {{pdfFile.url}}正在打印：

~/Content/PdfFiles/Test1.pdf 
~/Content/PdfFiles/Test2.pdf

<div>
    @*<iframe src="~/Content/PdfFiles/Test1.pdf" style="width:100%; height:600px;" type='application/pdf'></iframe>*@
    <div ng-repeat="pdfFile in pdfFiles">
        {{pdfFile.url}}
        <iframe src="{{pdfFile.url}}" style="width:100%; height:600px;" type='application/pdf'></iframe>
    </div>
</div>

Answer 1

尝试使用ng-src：

<iframe ng-src="{{pdfFile.url}}" style="width:100%; height:600px;" type='application/pdf'></iframe>

希望有帮助=）

修改：为iframe代码中的ng-src属性添加了{{}}符号。

Answer 2

试试这个：

控制器：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.pdfFiles = [
    {
    "url": "http://samplepdf.com/sample.pdf"
    },
    {
    "url": "http://samplepdf.com/sample.pdf"
    }
    ];
});

查看：

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="pdfFile in pdfFiles">
        {{pdfFile.url}}
        <iframe src="{{pdfFile.url}}" style="width:100%; height:300px;" type='application/pdf'></iframe>
    </div>
</div>

Working demo!