最近在工作中总会遇到需要达到手风琴般的效果，如下图所示：

由于不同情况下摘要(上部)和细节(下部灯光部分)显示的场数不同，编辑和显示之间存在状态切换，需要自行实现手风琴效果。

最初的想法是利用css的变换作为动态效果，点击details按钮(或中间部分的下拉图标)请求details数据，然后将details部分的高度设置为指定的高度，再次点击details按钮(或中间部分的下拉图标)，details部分就会被收起。

但问题在于如何准确控制汇总数据明细应该显示哪一行，关闭其他行的明细。经过一番思考，我决定用双向数据绑定来帮我完成这个任务。具体代码如下：

js:

$ scope。toogleshowdtl=function (item，e){//防止事件冒泡e . stopperpagation()；for(var I=0；I $范围。order HDR . length；i ) { if ($scope。OrderHdr[i]。Bill_Hdr_Id！=项目。Bill_Hdr_Id) { $scope。OrderHdr[i]。mxShow=false$scope。OrderHdr[i]。iconChange=' glyphicon glyphicon-menu-down '；} } switch(item . MX show){ case undefined : item . MX show=true；item . iconChange=' glyphicon glyphicon-menu-up '；打破；case true : item . MxShow=false；item . iconChange=' glyphicon glyphicon-menu-down '；打破；case false : item . MxShow=true；item . iconChange=' glyphicon glyphicon-menu-up '；打破；default: item.mxShow=falseitem . iconChange=' glyphicon glyphicon-menu-down '；打破；} }html:

div class=' col-sm-12 detial _ box ' ng-click=' selectHdr($ index)' ng-class=' { DTL _ select : $ index==selectedIndex } ' div class=' col-sm-3 ' style=' margin-top 336060 px；'button class=' BTN BTN-primary ' ng-click=' toogleShowDtl(o，$ event)' details/button/div class=' down _ img ' span class=' { { o . icon change } } glyphicon glyphicon-menu-down ' ng-click=' toogleShowDtl(o，$ event)'/span/div/div class=' col-sm-12 MX _ box check-element animate-show-hide ' ng-show=' o . mxshow '！-Details - /div当触发点击事件时，当前行的数据中没有mxShow字段，所以这个字段循环添加到其中，值为false。当前单击的行不能执行此操作，否则第一次单击时，更改为另一行的详细信息将不会显示。下面的switch case语句确保第一次单击mxShow时没有值，mxShow值会切换。item.iconChange的值用于控制中间字体图标的切换。细节不显示时，图标向下，表示可以展开；当细节显示时，图标是向上的，这意味着它们可以折叠。

Ng-show='o.mxShow '确定是否根据mxShow的值显示详细信息。

Class=' {{o.icon change}}字形图标字形图标-菜单-向下'用于切换图标

最终渲染如下(我不知道如何上传动画o()o)

以上就是边肖介绍的Agularjs的双向数据绑定实现手风琴效果的妙用。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！