Question

我有一份学生名单对于一些学生，我必须显示一个链接，并在点击此链接时，他们的进度卡应该加载（它是.pdf文件）。对于其他人，不应显示链接。

我这样做是通过给他们的进度卡提供相同的学生ID，如果是这个特定的学生，那么显示链接;否则，请勿显示链接。我可以这样做，只有5或6名学生。我不能为1000名学生这样做。

以下是我的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>

这里我没有指定控制器，这是骨架功能对我有用。

1000条记录我怎么能这样做？

Answer 1

只要您与pdf文件位于同一个域，就可以发出http请求以确定文件是否存在。

对于给定的学生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; }

'HEAD'是确保文件存在所必需的全部内容;您也可以使用'GET'，但在这种情况下您似乎不需要整个文件。

Answer 2

这是另一种方式。您可以制定指令并使用此指令验证属性，并在元素中设置您想要的任何内容。

<强> 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

<figure class="podcast-item col-md-2" ng-repeat="image in images">
    <a href="#">
        <img class="img-thumbnail" img-check="{{image.url}}" />
    </a>
</figure>

Answer 3

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>

对于1000，将其放在ng-repeat中然后你应该更好，在一个请求中测试所有PDF并将其保存在缓存列表中。

Answer 4

非常简单的兄弟，你只需要使用ng-reapeat和ng-show。下面是我的代码与小提琴示例，我希望它适合你。

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：

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'},
        ]




  }]);

示例：http://jsfiddle.net/asadalikanwal/3a2zvrht/3/ 只需更改一次PDF路径即可。如果你有任何问题拍摄

使用AngularJS如何检查文件夹中是否存在PDF文件？

4 个答案: