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