AngularJS：显示和更新 ng-repeat 的每个元素的进度条答案

【问题标题】：AngularJS: show and update a progress bar for each element of a ng-repeatAngularJS：显示和更新 ng-repeat 的每个元素的进度条
【发布时间】：2014-04-27 23:50:41
【问题描述】：

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

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

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

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

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

如您所见，如果您单击一个按钮，则会显示所有进度条。例如，对于 id 为“2”的对象，如何只显示其进度条？例如，如何更改文本“剩余 25%”？

提前感谢您的帮助。

丹尼尔。

【问题讨论】：

标签： javascript node.js angularjs

【解决方案1】：

显示/隐藏栏

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

另一方面，为数据数组中的每个项目添加另一个属性可能不是问题，除非您将数组发送回服务器并且在保存或类似时不能优雅地忽略新属性。如果您直接从服务器接收数据，则属性“hide_bar”缺失/未定义，这是一个虚假值。 ng-show 将隐藏进度条。单击按钮并执行 hide_bar = !hide_bar 会将值更改为 true，并且会显示该栏。

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

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

更改百分比

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

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

使用ngStyle 指令和将百分比值转换为像 {width: '75%'} 这样的对象的小型辅助函数可以更改进度条 div 的样式。

【讨论】：

【解决方案2】：

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

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

【讨论】：

您还应该在答案中包含相关代码，以便如果 plnkr.com 无法访问或该特定链接消失，此答案对于未来的访问者仍然很有价值。