ng-repeat 里 使用ng-show ng-hide出现闪动

时间：2022-11-25 17:23:46

在项目中使用ng-repeat在表格中循环输出一组数据的时候，需要对表格中的每一列（每一列为数组的一个元素--对象）添加控制按钮。

列表样式

 

 

ng-repeat 里 使用ng-show ng-hide出现闪动

我的期望是

初始化

　　----每一行不可编辑，保存按钮是隐藏状态

编辑

　　----当点击编辑按钮时进入编辑状态，同时编辑按钮隐藏，保存按钮显示

保存

　　----当点击保存按钮，退出编辑状态，不可编辑，编辑按钮显示，保存按钮隐藏

 

如果这是一列的话就很容易办到。给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-repeat 里 使用ng-show ng-hide出现闪动）的ng-cloak解释。

但是ng-cloak 指令把元素隐藏掉的问题就是这个元素的高度为0了，在需要计算高度的地方请慎用

标签：

相关文章