避免 angular ng-repeat 在所有行中显示进度条

Question

我正在尝试根据特定行的按钮点击来上传文档。我正在显示正在上传的文件的进度。我面临的问题是，由于按钮是使用 ng-repeat 显示的，所有行现在都显示进度。有什么办法可以让我点击按钮的那一行只显示进度吗？

 tr(ng-repeat='row in displayedCollection')
                        td {{ row.branchName}}
                        td {{ row.email}}
                        td {{ row.belongsTo.companyName }}
                        td
                            button.btn.btn-primary(ngf-select ngf-change="uploadDocuments($files,row._id)" ngf-accept="'image/*,.pdf,.doc,.docx'",multiple) Upload Documents
                                div(ng-show='progressVisible')
                                    .percent {{percentage}}%
                                    .progress-bar
                                        .uploaded(ng-style="{'width': percentage+'%'}")

Answer 1

发生这种情况是因为 progressVisible 是所有变量的公共变量，您需要的是仅用于单次迭代的特定变量

即

ng-show="row.progressVisible"

或

ng-show="progressVisible[$index]"

并在上传的函数中相应地设置值

避免 angular ng-repeat 在所有行中显示进度条

avoid angular ng-repeat displaying progress bar in all rows

angularjs

pug

即

或