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了,在需要计算高度的地方请慎用
ng-repeat 里 使用ng-show ng-hide出现闪动的更多相关文章
- Part 6 AngularJS ng repeat directive
ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...
- table sorting–angularjs
1: <script type="text/javascript" ng:autobind 2: src="http://code.angularjs.org/0. ...
- 铜齿铁牙UP计划
铜齿铁牙UP计划 我在""做教练"之好声音训练"给出了老师.播音主持学习者,声乐学习者科学用声三要点: 用气发声 共鸣发声 虚实结合 用气发声首先要学会腹式呼吸 ...
- (已解决)'ng' 不是内部或外部命令,也不是可运行的程序或批处理文件
前言: 之前在安装Angular环境的时候有个问题,就是通过命令成功安装了angular cli脚手架工具,但是在终端(win+r cmd)中输入ng version一直提示的是'ng' 不是内部或外 ...
- Flume NG Getting Started(Flume NG 新手入门指南)
Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...
- Flume NG基本架构与Flume NG核心概念
导读 Flume NG是一个分布式.可靠.可用的系统,它能够将不同数据源的海量日志数据进行高效收集.聚合.移动,最后存储到一个中心化数据存储系统中. 由原来的Flume OG到现在的Flume NG, ...
- Flume OG 与 Flume NG 的对比
Flume OG 与 Flume NG 的对比 1.Flume OG Flume OG:Flume original generation 即Flume 0.9.x版本,它由agent.collect ...
- ng-repeat里创建的自定义指令
在ng里,所有的指令在按照意愿正常工作之前的都需要编译一下,包含angularJS的自定义指令. ng模板里的所有指令都会在angularJS加载完毕之后编译一下,所以那些自定义指令和事件才能工作. ...
- [转]Angular: Hide Navbar Menu from Login page
本文转自:https://loiane.com/2017/08/angular-hide-navbar-login-page/ In this article we will learn two ap ...
- angularjs学习总结 详细教程(转载)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
随机推荐
- mybatis: 利用多数据源实现分库存储
之前写过一篇mybatis 使用经验小结 提到过多数据源的处理方式,虽然简单但是姿势不太优雅,今天介绍一些更美观的办法: spring中有一个AbstractRoutingDataSource的抽象类 ...
- [LeetCode] Palindrome Permutation 回文全排列
Given a string, determine if a permutation of the string could form a palindrome. For example," ...
- Ceph RGW 创建默认的pool
使用Ceph-deploy完成RGW服务部署后(最好是在部署RGW服务前建立如下这些pool),使用sudo ceph osd lspools 命令,会发现RGW自动以默认参数创建了N个rgw相关的p ...
- BZOJ-2127-happiness(最小割)
2127: happiness(题解) Time Limit: 51 Sec Memory Limit: 259 MBSubmit: 1806 Solved: 875 Description 高一 ...
- Linux sudo 命令的应用
.note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...
- WPF 控件总结
内容控件:1.Button:当Button.IsCancel="True"时,点击按钮,对话框关闭.当Button.IsDefault="True",按回车触发 ...
- 了不起的全能MAC系统监测工具iStat Menus 5下载
iStat Menus 5 是一款由软件开发商 Bjango 制作的 System Monitor (工具,也是笔者电脑里的必装应用之一,它能让用户最快速.最直观地了解到几乎各硬件所有的运行状态,其中 ...
- subtext3插件安装
1.启用Package Control,利用它进行插件安装: 启用方法:菜单栏-view-show console 在弹出的输入框内,输入以下代码,按回车,稍后会出现package control安装 ...
- excel批处理_判断一个名称是不是药品
把药品名称导入到sheet1的A字段 # -*- coding: utf-8 -*-"""Created on Fri Dec 9 09:38:58 2016判断一个名 ...
- phpexcel 字符串转码
问题状况:在导入excel的时候会出现 PHPExcel_RichText Object ( [_richTextElements:PHPExcel_RichText:] => PHPExcel ...