javascript 使用 AngularJS 如何检查文件夹中是否存在 PDF 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26270862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using AngularJS how to check a PDF file exist in a folder or not?
提问by user1187
I have a list of students.
For some students I have to show a link, and on clicking this link their progress card should load (it is a .pdf file). For others, the link should not be shown.
我有一份学生名单。
对于一些学生，我必须显示一个链接，点击此链接后，他们的进度卡应该加载（它是一个 .pdf 文件）。对于其他人，不应显示链接。
I have done this by giving the same student id to their progress card and if it is this particular student then show the link; otherwise, don't show the link. I can do it this way for only 5 or 6 students. I cant do this for 1000 students.
我通过给他们的进度卡提供相同的学生 ID 来做到这一点，如果是这个特定的学生，则显示链接；否则，不要显示链接。我只能为 5 或 6 名学生这样做。我不能为 1000 名学生做到这一点。
The following is my AngularJS code:
以下是我的 AngularJS 代码：
if (response.student_id == 'SD0001' || response.student_id == 'SD0002' || response.student_id == 'SD0004') {
$scope.pdfData = true;
$scope.StudentPDFFile = response.student_id+'.pdf';
} else {
$scope.pdfData = false;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<body id="ng-app" ng-app>
<div ng-switch on="pdfData">
<div ng-switch-when="false"></div>
<div ng-switch-when="true">
<span class="font-10">Download Performance Report</span>
<a href="http://www.example.com/s-pdf/{{StudentPDFFile}}" target="_blank">- click here</a>
</div>
</div>
</body>Here I haven't specified the controller, this is skeleton functionality is working for me.
在这里我没有指定控制器，这是骨架功能对我有用。
For 1000 records how I can do this?
对于 1000 条记录，我该怎么做？
回答by Luigi
You can make a http request to determine if the file exists as long as you are on the same domain as the pdf file.
只要您与 pdf 文件在同一个域中，您就可以发出 http 请求来确定该文件是否存在。
For a given student ID (which in your code appears to be response.student_id) it looks like this:
对于给定的学生 ID（在您的代码中似乎是response.student_id），它看起来像这样：
if(response.student_id) {
var url = 'http://www.example.com/s-pdf/' + response.student_id + '.pdf';
var request = new XMLHttpRequest();
request.open('HEAD', url, false);
request.send();
if(request.status == 200) {
$scope.pdfData = true;
$scope.StudentPDFFile = response.student_id+'.pdf';
} else {
$scope.pdfData = false;
}
} else {
$scope.pdfData = false;
}
The 'HEAD'is all that is necessary to ensure that the file exists; you could also use 'GET'but it doesn't seem like you need the whole file in this situation.
这'HEAD'是确保文件存在所必需的全部内容；您也可以使用，'GET'但在这种情况下似乎不需要整个文件。
回答by user2800430
This is another way. You can make a directive and verify an attrib with this directive and set anything you want in the element.
这是另一种方式。您可以创建一个指令并使用此指令验证属性并在元素中设置您想要的任何内容。
JS
JS
angular.module('myApp')
.directive('imgCheck', ['$http', function($http){
return {
link: function(scope, element, attrs){
$http.get('/img/'+attrs.imgCheck)
.success(function(data, status){
if(status==200){
attrs.$set('src','/img/'+attrs.imgCheck)
}else{
attrs.$set('src','/img/not-found.png')
}
})
.error(function(data,status){
if(status==200){
attrs.$set('src','/img/'+attrs.imgCheck)
}else{
attrs.$set('src','/img/not-found.png')
}
});
}
};
}]);
}]);
HTML
HTML
<figure class="podcast-item col-md-2" ng-repeat="image in images">
<a href="#">
<img class="img-thumbnail" img-check="{{image.url}}" />
</a>
</figure>
回答by KyleK
ng-showseems more appropriate:
ng-show似乎更合适：
<div ng-show="pdfData">
<span class="font-10">Download Performance Report</span>
<a href="http://www.example.com/s-pdf/{{StudentPDFFile}}" target="_blank">- click here</a>
</div>
For 1000, put it in a ng-repeatthen you should better, test all the PDFs in one request and keep it in a cached list.
对于 1000，把它放在一个ng-repeat然后你应该更好，在一个请求中测试所有的 PDF 并将它保存在一个缓存列表中。
回答by Asad Ali Kanwal
Its very simple bro, you just have to use ng-reapeat and ng-show. Below is my code with fiddle example, I hope it works for you.
它非常简单，兄弟，你只需要使用 ng-reapeat 和 ng-show。下面是我的带有小提琴示例的代码，我希望它对你有用。
HTML:
HTML：
<div ng-app="studentApp">
<h2>List of Students</h2>
<div ng-controller="studentController">
<div ng-repeat="student in students">
Student Name : <strong>{{student.name}}</strong><br>
<div ng-show="{{student.url}}"><a href="{{student.url}}" title="" >Download PDF</a><br></div>
<hr>
</div>
</div>
</div>
JS:
JS：
angular.module('studentApp', [])
.controller('studentController', ['$scope', function($scope) {
$scope.students = [
{name: 'John', url:'abc.com/files/1.pdf'},
{name: 'Peter', url:''},
{name: 'Kerry', url:'abc.com/files/1.pdf'},
{name: 'Silly', url:'f'},
]
}]);
Example: http://jsfiddle.net/asadalikanwal/3a2zvrht/3/Just change the PDF path with you once. If you have any question shoot
示例：http: //jsfiddle.net/asadalikanwal/3a2zvrht/3/只需与您更改 PDF 路径一次。如有问题请拍
