Agularjs妙用雙向數(shù)據(jù)綁定實現(xiàn)手風(fēng)琴效果
最近在工作總遇到需要實現(xiàn)類似手風(fēng)琴效果的需求，如下圖所示：
因為匯總（上半部分）和明細(xì)（下面的淺色部分）在不同的情況下顯示的字段數(shù)量是不一樣的，而且還有編輯和展示的狀態(tài)切換，所以需要自己實現(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ù)綁定實現(xiàn)手風(fēng)琴效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號的區(qū)別使用
這篇文章主要介紹了詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號的區(qū)別使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要介紹了AngularJs實現(xiàn)ng1.3+表單驗證，感興趣的小伙伴們可以參考一下2015-12-12
對于一個Sass用戶,只需要理解Sass擴(kuò)展部分如何工作的,就能完全理解SCSS,下面這篇文章主要給大家介紹了關(guān)于Angular中SASS樣式的詳細(xì)使用教程,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了webapp框架AngularUI的demo改造之路,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了Angular.js去除頁面中顯示的空行方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個核心概念，但是有時候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說明的相關(guān)資料,需要的朋友可以參考下2016-08-08
詳解從angular-cli：1.0.0-beta.28.3升級到@angular/cli：1.0.0
本篇文章主要介紹了詳解從angular-cli：1.0.0-beta.28.3升級到@angular/cli：1.0.0，具有一定的參考價值，有興趣的可以了解一下2017-05-05
Angular.js前臺傳list數(shù)組由后臺spring MVC接收數(shù)組示例代碼
這篇文章主要給大家介紹了關(guān)于Angular.js前臺傳list數(shù)組之后，由后臺spring MVC接收數(shù)組的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要介紹了Angular PWA使用的Demo示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了AngularJS壓縮JS的操作技巧,分析了AngularJS進(jìn)行壓縮（minify）之后出現(xiàn)的問題與相應(yīng)的解決方法,需要的朋友可以參考下2016-11-11