Угловая заправка одной колонки на основе ответа сервера

Question

Я новичок в угловой, так что извините, если это очень простой вопрос.

Я построил клиент-серверное приложение, которое позволяет загружать файлы, а затем проверяет их (некоторые внутренние правила) и возвращает файл журнала в случае неудачной проверки.

Я использую модуль Angular File Upload для клиентской стороны, пример simple.

Ответ от сервера выглядит следующим образом (JSON)

{"status":"FAILED","entity":"download/logs/24f307d3-8964-4a5b-8d66-0763503892b1/","errors":[]} 

То, что я хочу сделать, это загрузить ссылку загрузки (от response.entity) для каждого файла.

Что я получаю такое же соединение для всех файлов (один из последнего файла)

Когда я проверяю, что происходит в режиме отладки (F12) Я вижу, что параметры меняются, но как-то они в настоящее время переопределяется последним.

Я думаю, что мне нужно как-то использовать ng-repeat, но дело в том, что оно уже используется для других столбцов.

Пожалуйста, помогите.

MY HTML таблицы:

<table class="table"> 
    <thead> 
    <tr> 
     <th width="50%">Name</th> 
     <th ng-show="uploader.isHTML5">Size</th> 
     <th ng-show="uploader.isHTML5">Progress</th> 
     <th>Status</th> 
     <th align="justify">Actions</th> 
     <th>Valid</th> 
     <th>Log</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="item in uploader.queue"> 
     <td>{{ item.file.name }}</td> 
     <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td> 
     <td ng-show="uploader.isHTML5"> 
     <div class="progress" style="margin-bottom: 0;"> 
      <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div> 
     </div> 
     </td> 
     <td class="text-center"> 
     <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span> 
     <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span> 
     <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span> 
     </td> 
     <td nowrap> 
     <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess"> 
      <span class="glyphicon glyphicon-upload"></span> Upload 
     </button> 
     <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading"> 
      <span class="glyphicon glyphicon-ban-circle"></span> Cancel 
     </button> 
     <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()"> 
      <span class="glyphicon glyphicon-trash"></span> Remove 
     </button> 
     </td> 
     <td ng-show="item.isSuccess"> 
     {{this.uploader.validationStatus }} 
     </td> 
     <td ng-show="uploader.showLog"> 
     <a href={{this.uploader.logURL}} target="_blank">Log</a> 
     </td> 
    </tr> 
    </tbody> 
    </table> 

Я говорю о 2 последних столбцов:

<td ng-show="item.isSuccess"> 
    {{this.uploader.validationStatus }} 
    </td> 
    <td ng-show="uploader.showLog"> 
    <a href={{this.uploader.logURL}} target="_blank">Log</a> 
    </td> 

я сделал следующие изменения в файле controller.js:

uploader.onCompleteItem = function(fileItem, response, status, headers) { 
    console.info('onCompleteItem', fileItem, response, status, headers); 
    var resp = JSON.stringify(response.entity); 

    if (resp == "\"Success\"") { 
     this.validationStatus = "Yes"; 
     this.showLog = false; 
    } else { 
     this.validationStatus = "No"; 
     this.logURL = resp.replace(/\"/g, ""); 
     this.showLog = true; 
    } 

Решение:

изменения в controllers.js файле:

uploader.onCompleteItem = function(fileItem, response, status, headers) { 
    console.info('onCompleteItem', fileItem, response, status, headers); 
    if (response.status === 'FAILED') { 
    fileItem.validationStatus = "No"; 
    fileItem.logUrl = response.entity; 
    fileItem.showLog = true; 

    } else { 
    fileItem.validationStatus = "Yes"; 
    fileItem.showLog = false; 
    } 
}; 

Изменения в HTML файле:

<td ng-show="item.isSuccess" ng-class="{green: item.validationStatus == 'Yes', red: item.validationStatus == 'No'}"> 
    {{item.validationStatus}} 
</td> 
<td ng-show="item.showLog"> 
    <a href={{item.logUrl}} target="_blank">Log</a> 
</td> 

Answer 1

следующей строки

this.logURL = resp.replace(/\"/g, ""); 

переопределяет значение logUrl при каждом завершении загрузки файла и сохраняет его на объекте-загрузке. Вот почему вы видите только последнее значение для каждого элемента в загрузчике.Очередь

Попробуйте сохранить каждый URL отдельно в словаре объекта, использовать имя файла в качестве ключа, а затем справочная информация URL-адрес, соответственно, во время нг-повторить итерация

, например, это может быть что-то вроде этого:

uploader.onCompleteItem = function(fileItem, response, status, headers) { 

    console.info('onCompleteItem', fileItem, response, status, headers); 
    var resp = JSON.stringify(response.entity); 
    this.logUrlList = {}; 
    if(resp=="\"Success\""){ 
     this.validationStatus = "Yes"; 
     this.showLog = false; 
    }else{ 
     this.validationStatus = "No"; 
     this.logUrlList[fileItem.file.name] = resp.replace(/\"/g, ""); 
     this.showLog = true; 

    } 
} 

HTML, будет выглядеть следующим образом:

<td ng-show="uploader.showLog"> 
    <a href={{this.uploader.logUrlList[item.file.name]}} target="_blank">Log</a> 
</td> 

Answer 2

Я получил эту работу!

Мой JSON ответ от сервера:

{"filename":"Hypnotoad.mp4","link":"/hypnotoad.mp4","size":1858796} 

Это мой контроллер:

uploader.onSuccessItem = function(fileItem, response, status, headers) { 
    console.info('onSuccessItem', fileItem, response, status, headers); 
    fileItem.file.link = JSON.stringify(response.link).replace(/\"/g, ""); 
    fileItem.file.linkname = JSON.stringify(response.filename).replace(/\"/g, ""); 
}; 

И мой HTML:

<td ng-show="uploader.isHTML5"> 
    <a href={{item.file.link}} target="_blank">{{item.file.linkname}}</a> 
</td> 

Пример выше также работает, но только для последнего элемента из очереди. Мой пример работает для всех элементов в очереди.