2014-10-09 3 views
2

У меня есть список студентов.
Для некоторых студентов я должен показать ссылку, и при нажатии этой ссылки их карта выполнения должна загрузиться (это файл .pdf). Для других ссылка не должна отображаться.Использование AngularJS, как проверить файл PDF, существует в папке или нет?

Я сделал это, указав тот же идентификатор студента на свою карточку прогресса, и если именно этот конкретный ученик покажет ссылку; в противном случае не показывать ссылку. Я могу сделать это таким образом только для 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 записей, как я могу это сделать?

+0

скажите мне Резон для redusing моих очков – Athi

+1

Если вы начинаете щедроты количество уменьшаются с вашей точки независимо Wheter вы получите ответ или нет. – Wilgert

ответ

10

Вы можете сделать http-запрос, чтобы определить, существует ли файл , если вы находитесь в том же домене, что и файл pdf.

Для данного студенческого билета (который в вашем коде, как представляется, 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', но, похоже, вам не нужен весь файл в этой ситуации.

+0

Не работает – Athi

+0

request.send не работает i задан рядом с request.send(); alert ("hi"); его ничего не предупреждают. Так что у меня проблема request.send. Пожалуйста, помогите мне – Athi

+0

Запрос на перекрестный запрос заблокирован: политика одного и того же происхождения запрещает чтение удаленного ресурса по ссылке. Это можно устранить, переместив ресурс в тот же домен или включив CORS. – Athi

1

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 в один запрос и сохранить его в кэшированных списке.

1

Его очень простой брат, вам просто нужно использовать 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 с вами один раз. Если у вас есть какие-либо вопросы стрелять

+0

У меня 1000 записей, которые я не могу записать Это – Athi

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> 
Смежные вопросы