Agularjs妙用雙向數(shù)據(jù)綁定實(shí)現(xiàn)手風(fēng)琴效果
最近在工作總遇到需要實(shí)現(xiàn)類似手風(fēng)琴效果的需求，如下圖所示：
因?yàn)閰R總（上半部分）和明細(xì)（下面的淺色部分）在不同的情況下顯示的字段數(shù)量是不一樣的，而且還有編輯和展示的狀態(tài)切換，所以需要自己實(shí)現(xiàn)手風(fēng)琴效果。
初步的想法是用css的transform做動效，點(diǎn)擊詳情按鈕（或中間部分的下拉圖標(biāo)）時請求詳情數(shù)據(jù)，然后將詳情部分的height設(shè)置成指定高度，再次點(diǎn)擊詳情按鈕（或中間部分的下拉圖標(biāo)），詳情部分被收起。
但是這樣的問題在于我們?nèi)绾尉_的控制到底該顯示哪一行匯總數(shù)據(jù)的明細(xì)和關(guān)閉其他行的明細(xì)，經(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">
<!--明細(xì)內(nèi)容-->
</div>
當(dāng)點(diǎn)擊事件觸發(fā)的時候，當(dāng)前行數(shù)據(jù)中并沒有mxShow這個字段，故循環(huán)為其添加上該字段并賦值為false，當(dāng)前被點(diǎn)擊的行不能執(zhí)行這個操作，否則第一次點(diǎn)擊的時候改行的明細(xì)是不會展示的。后面的switch case語句保證了第一次點(diǎn)擊mxShow沒有值 以及mxShow值切換的問題。item.iconChange 的值是用來控制中間字體圖標(biāo)的切換，當(dāng)明細(xì)沒展示的時候圖標(biāo)是向下的，代表可以展開，當(dāng)明細(xì)顯示的時候圖標(biāo)向上，代表可以收起。
ng-show="o.mxShow" 根據(jù)mxShow的值來確定明細(xì)是否展示。
class="{{o.iconChange}} glyphicon glyphicon-menu-down"
用來切換圖標(biāo)
最終效果圖如下（不知道怎么上傳動圖o(╯□╰)o）
以上所述是小編給大家介紹的Agularjs妙用雙向數(shù)據(jù)綁定實(shí)現(xiàn)手風(fēng)琴效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- JS實(shí)現(xiàn)圖片手風(fēng)琴效果
- JavaScript手風(fēng)琴頁面制作
- Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例
- js實(shí)現(xiàn)帶三角符的手風(fēng)琴效果
- js實(shí)現(xiàn)簡單的手風(fēng)琴效果
- js以及jquery實(shí)現(xiàn)手風(fēng)琴效果
- 原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果
- 原生js實(shí)現(xiàn)手風(fēng)琴功能（支持橫縱向調(diào)用）
- Html5 js實(shí)現(xiàn)手風(fēng)琴效果
- JS實(shí)現(xiàn)手風(fēng)琴特效
相關(guān)文章
詳解使用KeyValueDiffers檢測Angular對象的變化
這篇文章主要為大家介紹了KeyValueDiffers檢測Angular對象的變化使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了AngularJS 自定義過濾器,這里整理了相關(guān)資料及示例代碼，有興趣的小伙伴可以參考下2016-09-09
Angular中的結(jié)構(gòu)指令模式及使用詳解
這篇文章主要為大家介紹了Angular中的結(jié)構(gòu)指令模式及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
本文主要介紹AngularJS ng-style 指令,這里對ng-style 指令做了詳細(xì)的基礎(chǔ)資料整理，并附有代碼示例，有需要的朋友可以參考下2016-08-08
本篇文章主要介紹了AngularJS自定義指令詳解（有分頁插件代碼），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
AngularJS折疊菜單實(shí)現(xiàn)方法示例
這篇文章主要介紹了AngularJS折疊菜單實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)折疊菜單的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
通常我們需要使用管道實(shí)現(xiàn)對數(shù)據(jù)的格式化，下面這篇文章主要給大家介紹了關(guān)于Angular中管道操作符(|)的使用方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
使用Angular Cli如何創(chuàng)建Angular私有庫詳解
這篇文章主要給大家介紹了關(guān)于使用Angular Cli如何創(chuàng)建Angular私有庫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
Directive的概念在Angular 1.x就存在了，我對它的認(rèn)識比較模糊，所以直接通過一些例子來說明。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