在項目中使用ng-repeat在表格中迴圈輸出一組數據的時候，需要對錶格中的每一列（每一列為數組的一個元素--對象）添加控制按鈕。 列表樣式 我的期望是 初始化 每一行不可編輯，保存按鈕是隱藏狀態 編輯 當點擊編輯按鈕時進入編輯狀態，同時編輯按鈕隱藏，保存按鈕顯示 保存 當點擊保存按鈕，退出編輯狀態 ...
在項目中使用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了，在需要計算高度的地方請慎用
