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

标签 javascript node.js angularjs

我是 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/

相关文章:

node.js - sequelize [erro]{ this.name}.hasMany 中的模型关联调用不是 Sequelize.Model 的子类

javascript - "Interner Explore has stop working"在 IE 11 中出现问题当用户在 html 数字输入上进行选项卡时

javascript - 尝试运行我的 "webpack --config ./webpack.config.js"时出现错误

node.js - 机器人框架 - 无法与模拟器正常工作,但与任何已发布的 channel 均无法正常工作

javascript - 在表单输入字段中创建默认值

javascript - 传播语法返回意外的对象

javascript - 在 POST AngularJS 上更改按钮样式

css - 在最小图像之后调整行

javascript - 在每次迭代中执行超时的 async.series 的最佳方法是什么?

javascript - 用于查找 div 内输入的 jQuery 选择器