我是 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-show 将隐藏进度条。单击按钮并执行 hide_bar = !hide_bar 会将值更改为 true,并且将显示该栏。
看一下: http://plnkr.co/edit/ChC29smkhXyjuvQ9PZLF?p=preview
最初,变量数组中的项目没有属性“showProgress”。
更改百分比
这取决于扫描进度数据的来源。我猜它来自服务器,是变量数组条目中的一个属性。更改进度条很简单,例如
<span>{{ 100 - data.progress }}% left</span >
同样,可以使用 ngStyle 更改进度条 div 的样式。指令和小辅助函数,将百分比值转换为对象,如 {width: '75%'}。
关于javascript - AngularJS:显示和更新 ng-repeat 的每个元素的进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23324836/