AngularJS ng-style中使用filter
更新時間：2016年09月21日 09:12:11 作者：飛將軍
這篇文章主要介紹了AngularJS ng-style中使用filter的相關(guān)資料,需要的朋友可以參考下
問題原因:
Angular中使用boostrap的progress在ie8下有問題, 不能顯示出進(jìn)度
錯誤的寫法:
<div class="progress">
<div class="bar bar-success"
style="width:{{user.used | percent:user.total}}"></div></div>
這可能是因為在剛開始渲染頁面時, user的值還沒有獲取到, 所以width一直為0. 后來獲取到user的值了, 但界面已經(jīng)不能自動更新了導(dǎo)致的.
正確的寫法:
<div class="progress">
<div class="bar bar-success"
ng-style="{'width': (user.used | percent:user.total)}"></div>
</div>
總結(jié)
因為ng-style是angular自己的指令, 它會監(jiān)聽user的變化, 并輸出層div的style屬性, 所以是正確的.
注意, 在ng-style中使用filter: (user.used | percent: user.total)
以上就是對AngularJS ng-style的資料整理，后續(xù)繼續(xù)補充相關(guān)資料，謝謝大家對本站的支持！
相關(guān)文章
本文主要講解AngularJS ng-checked 指令,在這整理ng-checked 指令的基礎(chǔ)知識,并附代碼實例,有需要的小伙伴可以參考下2016-08-08
本文主要介紹 AngularJS Service,這里整理了AngularJS Servic的詳細(xì)資料,并提供代碼實例,有需要的小伙伴可以參考下2016-07-07
這篇文章主要介紹了angular4中引入echarts的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了angular+ionic返回上一頁并刷新頁面,需要的朋友可以參考下2017-08-08
本篇文章主要介紹了angular組件繼承的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
AngularJS基礎(chǔ) ng-cloak 指令簡單示例
本文主要介紹AngularJS ng-cloak 指令,這里幫大家整理了ng-clock指令的基礎(chǔ)資料,和簡單的代碼實例及效果圖,學(xué)習(xí)AngularJS指令的朋友可以參考下2016-08-08
Angular 4 依賴注入學(xué)習(xí)教程之FactoryProvider的使用（四）
這篇文章主要給大家介紹了關(guān)于Angular 4 依賴注入之FactoryProvider使用的相關(guān)資料，文中介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
AngularJS基礎(chǔ) ng-mouseenter 指令示例代碼
本文主要介紹AngularJS ng-mouseenter 指令,這里對ng-mouseenter 指令基礎(chǔ)資料做了詳細(xì)整理,并附代碼實例,有需要的小伙伴可以參考下2016-08-08
本文主要介紹了angular十大常見問題，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
詳解angularjs結(jié)合pagination插件實現(xiàn)分頁功能
本篇文章主要介紹了詳解angularjs結(jié)合pagination插件實現(xiàn)分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02