ng-repeat 里 使用ng-show ng-hide出現閃動


在項目中使用ng-repeat在表格中循環輸出一組數據的時候,需要對表格中的每一列(每一列為數組的一個元素--對象)添加控制按鈕。

列表樣式

 

 

我的期望是

初始化

  ----每一行不可編輯,保存按鈕是隱藏狀態

編輯

  ----當點擊編輯按鈕時進入編輯狀態,同時編輯按鈕隱藏,保存按鈕顯示

保存

  ----當點擊保存按鈕,退出編輯狀態,不可編輯,編輯按鈕顯示,保存按鈕隱藏

 

如果這是一列的話就很容易辦到。給tr標簽加上一個ng-class控制就行了,在控制器下設置一個初始狀態isEdit,點擊編輯和保存的時候更改isEdit控制tr添加或刪除一個樣式isEditing就行了。

但是多行的話就會引起一個問題,isEdit是在所有的tr上是共享的。怎么辦呢(控制器的邏輯要盡量少一些,在處理復雜操作的時候就需要考慮指令)

我的處理辦法還是在tr上通過添加或刪除isEditing控制編輯狀態;所有的按鈕都在一個指令中,<edit-btn></edit-btn>(其實我之前的辦法更笨,每個按鈕都寫成一個指令,真是蠢哭了。。。);

這樣更改如果層級發生變化,又需要調整層級鏈接。覺得比較好的辦法是在每行的tr上添加自定義指令

app.directive('xeditable',function(){
    return{
        restrict:'EAC',
        scope:{
            data:'=',
        },
        link:function(scope, elem, attr){
            elem.find('btn',function(){
                ...
            })
        }
    }
})

推薦一個table編輯和預覽插件http://angularjs4u.com/modules/top-5-tables-angularjs-modules/

這個網站提供一些好用的angularJS插件  AngularJS 4U

 

Note: 對於層級比較深的ng-show(ng-hide, ng-switch, ng-if, ng-include)閃現問題,使用指令添加樣式可以解決問題,但是對於某些情況可能不太適合,特別是針對某些特定顯示和隱藏,所以有另外一種解決辦法,ng-cloak,可以解決angularJS表達式執行過程中的閃現問題,這個指令的目的是給元素添加要給display:none的屬性,可以參見破狼(先膜拜下)的ng-cloak解釋。

但是ng-cloak 指令把元素隱藏掉的問題就是這個元素的高度為0了,在需要計算高度的地方請慎用


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM