AngularJS ng-style中使用filter  更新时间:2016年09月21日 09:12:11   作者:飞将军   这篇文章主要介绍了AngularJS ng-style中使用filter的相关资料,需要的朋友可以参考下 问题原因: Angular中使用boostrap的progress在ie8下有问题, 不能显示出进度 错误的写法: 这可能是因为在刚开始渲染页面时, user的值还没有获取到, 所以width一直为0. 后来获取到user的值了, 但界面已经不能自动更新了导致的. 正确的写法: 总结 因为ng-style是angular自己的指令, 它会监听user的变化, 并输出层div的style属性, 所以是正确的. 注意, 在ng-style中使用filter: (user.used | percent: user.total) 以上就是对AngularJS ng-style的资料整理,后续继续补充相关资料,谢谢大家对本站的支持! 您可能感兴趣的文章: AngularJS过滤器filter用法实例分析 AngularJS中的过滤器filter用法完全解析 Angularjs中如何使用filterFilter函数过滤 详解AngularJS中的filter过滤器用法 浅析AngularJS Filter用法 详解AngularJS Filter(过滤器)用法 Angular学习笔记之angular的$filter服务浅析 AngularJS ng-style filter 相关文章 Angular 开发学习之Angular CLI的安装使用 这篇文章主要介绍了Angular 开发学习之Angular CLI的安装使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 浅析AngularJS Filter用法 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧 2015-12-12 AngularJS入门示例之Hello World详解 这篇文章主要介绍了AngularJS入门示例之Hello World,较为详细的分析了AngularJS程序的原理及Hello World程序的创建步骤,需要的朋友可以参考下 2017-01-01 AngularJS应用开发思维之依赖注入3 这篇文章主要为大家详细介绍了AngularJS应用开发思维之依赖注入第三篇,感兴趣的小伙伴们可以参考一下 2016-08-08 AngularJS 入门教程之事件处理器详解 本文主要介绍AngularJS 事件处理器,这里整理了相关资料和示例代码,有需要的小伙伴可以参考下 2016-08-08 使用Angular CDK实现一个Service弹出Toast组件功能 本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧 2021-07-07 AngularJS+bootstrap实现动态选择商品功能示例 这篇文章主要介绍了AngularJS+bootstrap实现动态选择商品功能,涉及AngularJS指令、事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下 2017-05-05 AngularJS基础 ng-csp 指令详解 本文主要介绍AngularJS ng-csp 指令,这里对ng-csp 的基础资料的整理,并附代码实例和实现效果图,有需要的小伙伴参考下 2016-08-08 Angular2安装angular-cli 这篇文章主要介绍了Angular2安装angular-cli ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-05-05 JavaScript框架Angular和React深度对比 这篇文章主要介绍了JS框架中Angular和React不同和差异,以及两个框架的深度对比介绍。 2017-11-11 最新评论

问题原因:

Angular中使用boostrap的progress在ie8下有问题, 不能显示出进度

错误的写法:

<div class="progress">
  <div class="bar bar-success"
     style="width:{{user.used | percent:user.total}}"></div></div>

这可能是因为在刚开始渲染页面时, user的值还没有获取到, 所以width一直为0. 后来获取到user的值了, 但界面已经不能自动更新了导致的.

正确的写法:

<div class="progress">
  <div class="bar bar-success"
     ng-style="{'width': (user.used | percent:user.total)}"></div>
</div>

总结

因为ng-style是angular自己的指令, 它会监听user的变化, 并输出层div的style属性, 所以是正确的.
注意, 在ng-style中使用filter: (user.used | percent: user.total)

以上就是对AngularJS ng-style的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • AngularJS过滤器filter用法实例分析
  • AngularJS中的过滤器filter用法完全解析
  • Angularjs中如何使用filterFilter函数过滤
  • 详解AngularJS中的filter过滤器用法
  • 浅析AngularJS Filter用法
  • 详解AngularJS Filter(过滤器)用法
  • Angular学习笔记之angular的$filter服务浅析
张贴在3