In my Angular.js application, I currently have a row of buttons that open up new routes to display partial views. Now, I need to modify some of these buttons to trigger a ui.bootstrap Collapse feature with the view inside it. The template code from the ui.bootstrap examples is as follows:
<div ng-controller="CollapseDemoCtrl">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
My goal is to replace "Some content" with one of my own partials by clicking on buttons labeled:
Parties | Future Events
Currently, clicking on Parties loads them via a path /parties/:number where :number is the case number. Instead, I want to click on Parties and reveal a hidden DIV containing the parties. However, retrieving parties involves a separate web service so I'm unsure how to structure this setup. Can I load them on request?
How can I achieve this? I will eventually need multiple collapse statements triggered by different buttons for the various data rows on my page. Is this feasible?