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 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python与R语言的简要对比
2017/11/14 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
体操比赛口号
2014/06/10 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2014年护士长工作总结
2014/11/11 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
详解Vue router路由
2021/11/20 Vue.js