当前位置:首页 > 日记 > 正文

手风琴效果agularjs神奇的双向数据绑定

手风琴效果agularjs神奇的双向数据绑定
需要在工作中实现类似的手风琴效果,如下图所示:
因为上半部分和下一部分显示的字段数不同。不同情况下显示的字段数是不同的。此外,编辑和显示之间还存在状态切换,因此必须实现自己的手风琴效果。

最初的想法是用CSS做动态效果变换,点击细节按钮(或者中间部分的下拉图标)请求数据的详细信息,然后将部分细节的高度设置为指定的高度,再单击细节按钮(或者中间部分的下拉部分是折叠的,图标的细节)。

但问题是我们如何精确地控制哪一行来总结数据的细节,并关闭其他行的细节。经过一些考虑,我决定利用双向数据绑定来帮助我完成这项工作:

Js:
scope.toogleshowdtl美元=功能(项目,e){
停止事件
e.stoppropagation();
对于(var i = 0;我的<< scope.orderhdr.length美元;i++){
如果(美元范围。orderhdr {我}。bill_hdr_id!=项目。bill_hdr_id){
美元的范围。orderhdr {我}。mxshow = false;
美元的范围。orderhdr {我}。iconchange =glyphicon glyphicon菜单;
}
}
开关(项目。mxshow){
案例定义:
item.mxshow =真;
item.iconchange =glyphicon glyphicon菜单;
打破;
情况真的:
item.mxshow = false;
item.iconchange =glyphicon glyphicon菜单;
打破;
案例假:
item.mxshow =真;
item.iconchange =glyphicon glyphicon菜单;
打破;
违约:
item.mxshow = false;
item.iconchange =glyphicon glyphicon菜单;
打破;
}
}
HTML:

细节


当单击事件被触发时,当前行中的数据没有mxshow场,如此循环添加到域和指定错误。The currently clicked row cannot perform this operation, otherwise the details will not be displayed when the first click is taken.The following switch case statement guarantees the problem that the first click of mxShow is no value and the mxShow value switch.The value of item.iconChange is used to control the switchover of middle Font Icon. 当未显示细节时,图标向下,并且可以扩展代表。当显示细节时,图标向上,代表可以缩回。

NG秀=o.mxshow决定的细节显示在mxshow价值的基础上。
类={ } } { o.iconchange glyphicon glyphicon菜单
用于切换图标

最后的效果图如下(不知道如何上传O(动态图形如O /人))

以上是小编给agularjs神奇的双向数据绑定介绍手风琴效果的实现,希望对你有帮助,如果您有任何问题,请给我留言,萧边会及时回复你。谢谢你的支持网站。

相关文章

详细解释了HTTPS加密的完整过程

详细解释了HTTPS加密的完整过程

解释,加密,完整,过程,详细,完整的HTTPS加密过程 第一步:客户端发送一个通信请求到服务器 客户机服务器:您好 STEP2:服务器向客户发送自己的数字证书,使用公开密钥的证书来加密信息,而私钥则由服务器举行 顾客:您好,服务器是服务器,这是我的数字证…

win7下Oracle10g客户端和服务器安

win7下Oracle10g客户端和服务器安

服务器,安装教程,客户端,电脑软件,Oracle10g,win7下Oracle10g服务器端和客户端的安装方法如下: 如何卸载Oracle 10g 软件环境: 1,Windows XP + Oracle 10g 2,Oracle的安装路径是:Oracle Oracle实现方法: 1,启动>设置>控制面板>管理工具>服务停…

对JS像淘宝搜索框的用户输入事件的

对JS像淘宝搜索框的用户输入事件的

淘宝,搜索,输入,用户,事件,淘宝是一个网上购物平台,我们经常用开淘宝的主页,发现在淘宝首页的搜索框,如下所示: 正如你所看到的,当页面打开时,搜索框可以看到女孩的灰色高跟鞋和闪烁的光标。当用户点击输入时,灰色单词就会消失。当用户清除文本框…

PS如何添加日落效果的景观

PS如何添加日落效果的景观

景观,效果,电脑软件,PS,本教程教你学习PS图片处理,学习者用PS给照片增添美感效果,教程出调效果非常漂亮,制作也不难,新手也可以在这里学习,来学习推荐朋友分享学习,让我们先看看最终的形象: PS添加日落效果的美丽的风景照片 效果图: 原创电影: 主…

如何从网络插入PPT2010制作视频文

如何从网络插入PPT2010制作视频文

网络,视频文件,电脑软件,我们如何从互联网上插入一些视频到我们的PPT事实上,这种方法很简单。在PPT2010制作,我们插入功能从视频网站。也许你没找到。下面是一个视频文件,点编辑带给你从PPT2010制作网络中插入一个视频,希望对你有帮助。 在PPT…

PHP变量与JS变量直接交互的一种方

PHP变量与JS变量直接交互的一种方

变量,交互,方法,电脑软件,PHP,本文介绍了PHP变量与JS变量之间的直接交互方法,供大家参考: 每个人都知道,如果js变量要从后台获取PHP变量,它可以用这种方式编写: 变量=; 那么我们如何直接将JS变量的值支付给PHP变量呢 第一种方法也是最常用的方…

Dreamweaver如何向站点添加动态横

Dreamweaver如何向站点添加动态横

站点,动态,横幅,电脑软件,Dreamweaver,为什么要向网站添加动态横幅一方面,图片是不容易显示动画效果的,另一方面,你知道,百度现在对一些敏感到光。这个功能,更多的应用在光的顶部,让我们看看详细的教程。 软件名称:Adobe Dreamweaver CC 2017 v17…

Word2010总提示需要在线检测(解决方

Word2010总提示需要在线检测(解决方

提示,在线,解决方案,检测,安全模式,问题: 最近,开放词2010促使了编辑文件,这与往常一样。这是下一次打开word文件,提示在线检查,然后重新打开。 答案uff1a 根据以下内容,请参阅以下方法。 打开文件夹C:文件和设置管理员应用数据微软模板依次删…

ID页面序列无序如何在InDesign排版

ID页面序列无序如何在InDesign排版

教程,无序,的书,序列,页面,使用ID来排列书籍可以更直观,而且排版的页面也会非常整洁。下面我们来看看详细的教程。 软件名称:Adobe InDesign CC 2017 v12.0.0中文破解版(附破解补丁)32位软件大小:748.8mb更新时间:2016-11-06 1、打开ID软件,萧边…

如何安装农行的K宝和如何利用中国

如何安装农行的K宝和如何利用中国

农行,中国农业银行,安装,电脑软件,一些农业银行用户不知道如何安装K宝并分享这些知识: 1、当电脑第一次插入K宝时,它会自动弹出安装和驱动窗口,然后弹出一个窗口来安装K宝管理程序,并按提示安装它。 2,然后单击证书登录(如下所示),输入K的密码,等…

将PPT幻灯片转换成word文件(图形)

将PPT幻灯片转换成word文件(图形)

图形,文件,幻灯片,转换成,电脑软件,问题: 很多PPT幻灯片数据都是从老师那里抄来的,但是页面和页面都很麻烦。我听说PPT文件可以转换成word文件。所以看数据很方便,但是我不知道怎么操作。请指教! 答案uff1a 是的,你可以把PPT文件转换成word文…

oracle分页查询性能优化代码详细解

oracle分页查询性能优化代码详细解

分页查询,解决方案,性能优化,代码,详细,对于Web显示数据库中的数据,如果不需要显示订单,并且因为有这么多记录满足要求,我们就不得不分页数据。通常用户对所有数据不感兴趣,或者在大多数情况下,他们只查看前几页。 以下两种分页技术通常可用。 …