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了,在需要计算高度的地方请慎用
最新文章
- Javascript高性能编程-提高Dom访问速度
- 依赖倒置(DIP)与依赖注入(DI)
- C#委托和事件
- Ext.Net 破解
- Java元组类型之javatuples
- OJ常见问题及必须认识的对拍处理水题
- NSArray使用小结
- Slice到C++映射
- UIScroll和UIPickView
- jenkins 集成钉钉机器人
- python第一篇-------python介绍
- Mathematica/偏导数/最小二乘法(线性回归)
- yii的数据库相关操作
- HelloWorld带我入门JAVA(一)
- Faster_RCNN 1.准备工作
- C#中redis订阅后程序不再继续执行
- sqlserver 更新通过 select 查询出的结果集
- yum提示Another app is currently holding the yum lock
- CentOS7.5 防火墙指令
- python2.7安装mysql-python
热门文章
- [LeetCode] Convert a Number to Hexadecimal 数字转为十六进制
- [LeetCode] Range Sum Query 2D - Immutable 二维区域和检索 - 不可变
- Netty学习笔记之一(Netty解析简单的Http Post Json 请求)
- CSS布局
- 使用markdown
- CSS Hack技术介绍及常用的Hack技巧集锦
- .net core 源码解析-web app是如何启动并接收处理请求
- jQuery Mobile入门
- oracle数据查询
- bzoj3052: [wc2013]糖果公园