i using angular bootstrap ui library:
https://angular-ui.github.io/bootstrap/
to create collapsable feature on site. functionality working, expand/collapse every element have collapse feature on, instead of unique element clicked.
here code:
var app = angular.module('someapp', ['ui.bootstrap']); app.controller('collapsecontroller', ['$scope', function ($scope) { $scope.iscollapsed = true; }; .passinfodropdown { margin-top: 10px; margin-bottom: 10px; margin-left: 5px; font-weight: bold; } .dividerline { background-color: #ded7cf; height: 2px; } .passinfotablecellleft { width: 220px; } <div class="dividerline"></div> <div class="click" ng-click="iscollapsed = !iscollapsed"> <table> <tr> <td class="passinfotablecellleft"><div class="passinfodropdown inline">tsa information (optional)</div></td> <td><i class="fa fa-chevron-down inline"></i></td> </tr> </table> <div collapse="iscollapsed"> <div class="well well-lg">some content</div> </div> </div> <div class="dividerline"></div> <div class="click" ng-click="iscollapsed = !iscollapsed"> <table> <tr> <td class="passinfotablecellleft"><div class="passinfodropdown inline">loyalty programs (optional)</div></td> <td><i class="fa fa-chevron-down inline"></i></td> </tr> </table> <div collapse="iscollapsed"> <div class="well well-lg">some content</div> </div> </div> how can make unique element click collapses?
at moment both iscollapsed refer same propertie on $scope object. if want separed, see 2 options.
two properties in scope
$scope.iscollapsedcontent1 = true; $scope.iscollapsedcontent2 = true;or
$scope.iscollapsed = {}; $scope.iscollapsed['content1'] = true; $scope.iscollapsed['content2'] = true;two ng-model
if not need know whether content collapsed or not in controller, might put iscollapsed value html , remove propertie of $scope.
<div class="click" ng-click="iscollapsedcontent1 = !iscollapsedcontent1" ng-model="iscollapsedcontent1" ng-init="iscollapsedcontent1=true">
Comments
Post a Comment