AngularJS ng-style中使用filter


Posted in Javascript onSeptember 21, 2016

问题原因:

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的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 #Javascript
JS实现简单的tab切换选项卡效果
Sep 21 #Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 #Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 #Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 #Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 #Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 #Javascript
You might like
浅析php中json_encode()和json_decode()
2014/05/25 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
js opener的使用详解
2014/01/11 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python 时间处理datetime实例
2008/09/06 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
详解Django中Request对象的相关用法
2015/07/17 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
项目考察欢迎辞
2014/01/17 职场文书
空气的环保标语
2014/06/12 职场文书
城市创卫标语
2014/06/17 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
初婚初育证明范本
2014/11/24 职场文书
优秀党员推荐材料
2014/12/18 职场文书
北京英文导游词
2015/02/12 职场文书
社区党务工作总结2015
2015/05/19 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
MySQL 数据 data 基本操作
2022/05/04 MySQL