Angular语言 - 根据服务器响应填充一列

Question

我是angular的新手，很抱歉，如果这是一个非常基本的问题。

我构建了一个客户端-服务器应用程序，它允许上传文件，然后验证它们(一些内部规则)，并在验证失败的情况下返回日志文件。

我在客户端使用Angular的文件上传模块，简单的例子。

服务器的响应看起来像这样(JSON)

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

我要做的是为每个文件上传下载链接(从response.entity)。

我得到的是所有文件的相同链接(来自最后一个文件的那个)

当我检查在调试模式(F12)中发生的事情时，我确实看到参数正在改变，但不知何故它们被最后一个覆盖。

我认为我必须以某种方式使用ng-repeat，但问题是它已经被用于其他列。

请帮助。

我的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>

我说的是最后两列:

  <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;
    }

解决方案:

controller .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值，并将其保存在uploader对象上。这就是为什么在uploader.queue

中只看到每个项目的最后一个值的原因

尝试将每个URL单独保存在dictionary对象中，使用文件名作为关键字，然后在ng-repeat迭代期间相应地引用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>

上面的例子也可以，但只适用于队列中的最后一个元素。我的例子适用于队列中的所有元素。