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

时间:2014-04-27 14:51:12

标签: javascript node.js angularjs

我是AngularJS的初学者,我希望有人帮助我使用此代码,因为我不知道该怎么做。

这就是这样的情况:在我的项目中,我从服务器端(Node.js with express)收到数组中的几个对象,并用ng-repeat显示信息。因此,假设每个对象都是扫描,每个扫描都有一个进度条。当你clic运行该扫描时,会显示一个进度条以指示进度。

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

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

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

如您所见,如果您点击按钮,则会显示所有进度条。例如,对于id为#34; 2"的对象,如何仅显示其进度条?我怎么能改变文本" 25%左",例如?

提前感谢您的帮助。

丹尼尔。

2 个答案:

答案 0 :(得分: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指令和小帮助函数可以改变进度条div的样式,将百分比值转换为像{width:&#39; 75%&#39;}这样的对象

答案 1 :(得分:0)

我从你的傻瓜那里做了些什么,

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