Agularjs妙用雙向數(shù)據(jù)綁定實現(xiàn)手風琴效果
最近在工作總遇到需要實現(xiàn)類似手風琴效果的需求，如下圖所示：
因為匯總（上半部分）和明細（下面的淺色部分）在不同的情況下顯示的字段數(shù)量是不一樣的，而且還有編輯和展示的狀態(tài)切換，所以需要自己實現(xiàn)手風琴效果。
初步的想法是用css的transform做動效，點擊詳情按鈕（或中間部分的下拉圖標）時請求詳情數(shù)據(jù)，然后將詳情部分的height設(shè)置成指定高度，再次點擊詳情按鈕（或中間部分的下拉圖標），詳情部分被收起。
但是這樣的問題在于我們?nèi)绾尉_的控制到底該顯示哪一行匯總數(shù)據(jù)的明細和關(guān)閉其他行的明細，經(jīng)過一番思考我決定利用一下雙向數(shù)據(jù)綁定來幫我完成這個事情。具體代碼如下：
js：
$scope.toogleShowDtl = function (item, e) {
//阻止事件冒泡
e.stopPropagation();
for (var i = 0; i < $scope.OrderHdr.length; i++) {
if ($scope.OrderHdr[i].Bill_Hdr_Id != item.Bill_Hdr_Id) {
$scope.OrderHdr[i].mxShow = false;
$scope.OrderHdr[i].iconChange = "glyphicon glyphicon-menu-down";
}
}
switch (item.mxShow) {
case undefined:
item.mxShow = true;
item.iconChange = "glyphicon glyphicon-menu-up";
break;
case true:
item.mxShow = false;
item.iconChange = "glyphicon glyphicon-menu-down";
break;
case false:
item.mxShow = true;
item.iconChange = "glyphicon glyphicon-menu-up";
break;
default:
item.mxShow = false;
item.iconChange = "glyphicon glyphicon-menu-down";
break;
}
}
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:60px; ">
<button class="btn btn-primary" ng-click="toogleShowDtl(o,$event)">詳情</button>
</div>
<div class="down_img">
<span class="{{o.iconChange}} glyphicon glyphicon-menu-down" ng-click="toogleShowDtl(o,$event)"></span>
</div>
</div>
<div class="col-sm-12 mx_box check-element animate-show-hide" ng-show="o.mxShow">
<!--明細內(nèi)容-->
</div>
當點擊事件觸發(fā)的時候，當前行數(shù)據(jù)中并沒有mxShow這個字段，故循環(huán)為其添加上該字段并賦值為false，當前被點擊的行不能執(zhí)行這個操作，否則第一次點擊的時候改行的明細是不會展示的。后面的switch case語句保證了第一次點擊mxShow沒有值 以及mxShow值切換的問題。item.iconChange 的值是用來控制中間字體圖標的切換，當明細沒展示的時候圖標是向下的，代表可以展開，當明細顯示的時候圖標向上，代表可以收起。
ng-show="o.mxShow" 根據(jù)mxShow的值來確定明細是否展示。
class="{{o.iconChange}} glyphicon glyphicon-menu-down"
用來切換圖標
最終效果圖如下（不知道怎么上傳動圖o(╯□╰)o）
以上所述是小編給大家介紹的Agularjs妙用雙向數(shù)據(jù)綁定實現(xiàn)手風琴效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解使用KeyValueDiffers檢測Angular對象的變化
這篇文章主要為大家介紹了KeyValueDiffers檢測Angular對象的變化使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了AngularJS 自定義過濾器,這里整理了相關(guān)資料及示例代碼，有興趣的小伙伴可以參考下2016-09-09
Angular中的結(jié)構(gòu)指令模式及使用詳解
這篇文章主要為大家介紹了Angular中的結(jié)構(gòu)指令模式及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本文主要介紹AngularJS ng-style 指令,這里對ng-style 指令做了詳細的基礎(chǔ)資料整理，并附有代碼示例，有需要的朋友可以參考下2016-08-08
本篇文章主要介紹了AngularJS自定義指令詳解（有分頁插件代碼），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了AngularJS折疊菜單實現(xiàn)方法,結(jié)合完整實例形式分析了AngularJS實現(xiàn)折疊菜單的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
通常我們需要使用管道實現(xiàn)對數(shù)據(jù)的格式化，下面這篇文章主要給大家介紹了關(guān)于Angular中管道操作符(|)的使用方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2017-12-12
使用Angular Cli如何創(chuàng)建Angular私有庫詳解
這篇文章主要給大家介紹了關(guān)于使用Angular Cli如何創(chuàng)建Angular私有庫的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
Directive的概念在Angular 1.x就存在了，我對它的認識比較模糊，所以直接通過一些例子來說明。Angular提供的內(nèi)置執(zhí)行有很多，這次使用兩個：ngFor、ngIf。2016-08-08
在本教程中,您使用?Flex?布局與?Angular?應(yīng)用程序,它允許您構(gòu)建一個布局,使用預(yù)配置的?Flexbox?CSS?樣式,而無需額外的樣式,對Angular使用?Flex?布局相關(guān)知識感興趣的朋友跟隨小編一起看看吧2024-02-02