ui.bootstrapとanguarjsを使用して複数回折り畳む

私はui bootstrap collapseを作ろうとしています。私はスタティックシングルまたはダブル折りたたみシステムを使用していますが、それはうまく機能していますが、私のデザインではを使用して折りたたみを作成していますので、複数折りたたみを使用する方法はありませんui.bootstrapとanguarjsを使用して複数回折り畳む

それだけで

var app = angular.module("MyApp", ['ui.bootstrap']); 
    app.controller('mainController', function ($scope) { 
    $scope.trafficCollapsed = false; 
    $scope.urlCollapsed = false; 
    $scope.toggleUrl = function() { 
    $scope.urlCollapsed = false; 
    $scope.trafficCollapsed = !$scope.trafficCollapsed 
}; 
    $scope.toggleTraffic = function() { 
    $scope.trafficCollapsed = false; 
    $scope.urlCollapsed = !$scope.urlCollapsed; 
}; 
});

HTML

<tr> 
    <td>/<span class="pull-right" ng-click="toggleUrl()">&#x25BC;</span></td> 
    <td>A beautiful title</td> 
    <td>A beautiful description</td> 
    <td>54,654<span class="pull-right" ng-click="toggleTraffic()">&#x25BC;</span 
    </td> 
</tr>

私はこのデザインは崩壊になりたい、静的コードのために動作します。

出典

2016-08-29 Abhishek Pandey

これはあなたを助けるかもしれない、これを試してみてください。 here is working fiddle

<body ng-app="my_app"> 
    <div ng-controller="CollapseDemoCtrl"> 
    <ul class="nav"> 
     <li ng-repeat="(key,val) in menuArray"> 
     <button class="btn" ng-click="val.isMenuCollapsed = !val.isMenuCollapsed">{{val.button}} 
     <span class="caret"></span></button> 
     <ul class="dropdown-links" collapse="val.isMenuCollapsed"> 
     <li ng-repeat="link in val.links" role="menuitem"> 
      <a href="#">{{link.title}}</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
    </div>

スタイル

.nav>li { 
    display: inline !important; 
    position:relative; 
} 
.dropdown-links{ 
    position: absolute; 
    left: 0; 
    z-index: 1000; 
    float: left; 
    min-width: 100%; 
    padding: 5px; 
    margin: 2px 0 0; 
    font-size: 14px; 
    text-align: left; 
    list-style: none; 
    background-color: #fff; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0,0,0,.15); 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); 
    box-shadow: 0 6px 12px rgba(0,0,0,.175); 
}

コントローラーコード

var my_app = angular.module('my_app', ['ui.bootstrap']); 

my_app.controller('CollapseDemoCtrl', function ($scope) { 
$scope.menuArray = [ 
    {'button':'Button1','isMenuCollapsed':true,'links':[{'title':'link1-1'},{'title':'link1-2'}]}, 
    {'button':'Button2','isMenuCollapsed':true,'links':[{'title':'link2-1'},{'title':'link2-2'}]} 
]; 
    console.log($scope.menuArray); 
});

出典

2016-08-30 06:52:58

答えてくれてありがとう、私はcollapse'ない 'dropdown' HTTPS'必要な第一：//angular-ui.github .io/bootstrap /＃/ collapse、第2回私はすべてではない時に1つ開く必要があります。 @DevidasKadam –

あなたは、崩壊時に任意のマークアップを追加することができます、私はドロップダウンメニューを追加しました。私はフィドルを更新し、一度に1つを開いたままにしておきます。 –

[ここ]（https://jsfiddle.net/devidas7/xv7tws10/32/）は更新されたフィドルです。この例題からアイデアを出して自分で開発することができます。ついにあなたは開発者です。 –

ui.bootstrapとanguarjsを使用して複数回折り畳む

答えて

関連する問題