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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
js编写简单的计时器功能
Jul 15 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 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 ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python数据归一化及三种方法详解
2019/08/06 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
Python3.9新特性详解
2020/10/10 Python
python中count函数知识点浅析
2020/12/17 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
linux面试题参考答案(10)
2016/10/26 面试题
法律专业自我鉴定
2013/10/03 职场文书
劳动模范事迹材料
2014/01/19 职场文书
银行内勤岗位职责
2014/04/09 职场文书
办理房产证委托书
2014/09/18 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
如何写通讯稿
2015/07/22 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android