AngularJS:显示并更新ng repeat中每个元素的进度条

AngularJS: show and update a progress bar for each element of a ng-repeat

本文关键字：元素显示更新 repeat ng AngularJS 更新时间：2023-09-26

我是AngularJS的初学者，我希望有人能帮我写这段代码，因为我不知道怎么做。

情况是这样的：在我的项目中，我从服务器端接收到一个数组中的几个对象（带有express的Node.js），并用ng repeat显示信息。所以，假设每个对象都是一个扫描，每个扫描都有一个进度条。当您点击运行扫描时，会显示一个进度条来指示进度。

我不知道要做的是为每个对象显示进度条并更新每个进度条。

也许我没有正确解释我想做什么，但我相信你会理解Plunker上的这个例子：http://plnkr.co/edit/ejLKKIZpGr53jWra8VVj?p=preview

我写道，我从服务器接收信息，因为我不能使用新字段来控制进度条。例如：http://plnkr.co/edit/YqwhR4Z4YssCXxmmrlX4?p=preview但我不想这样做。

正如你所看到的，如果你点击一个按钮，所有的进度条都会显示出来。例如，对于id为"2"的对象，如何只显示其进度条？例如，我如何更改文本"还剩25%"？

提前感谢您的帮助。

丹尼尔。

显示/隐藏条形图

您可以添加一个额外的数组，该数组保存数据数组中相应项的"hide_bar"属性。这种方法的缺点是必须保持这些阵列的同步。

另一方面，为数据数组中的每个项添加另一个属性可能不是问题，除非您将数组发送回服务器，并且在保存或类似操作时无法正常忽略新属性。如果直接从服务器接收数据，则属性"hide_bar"丢失/未定义，这是一个错误的值。ng显示将隐藏进度条。单击按钮并执行hide_bar=！hide_bar将值更改为true，并显示条形图。

看看：http://plnkr.co/edit/ChC29smkhXyjuvQ9PZLF?p=preview

最初，变量数组中的项没有"showProgress"属性。

更改百分比

这取决于扫描进度数据的来源。我猜它来自服务器，是变量数组项中的一个属性。更改进度条就像一样简单

<span>{{ 100 - data.progress }}% left</span >

同样，进度条div的样式也可以使用ngStyle指令和小助手函数来更改，该函数将百分比值转换为类似｛width:"75%"｝的对象。

我从你的plunkr，中编造了一些东西

http://plnkr.co/edit/YqwhR4Z4YssCXxmmrlX4?p=preview