Question

我的Angular.js应用程序中有一行按钮，当前打开一个新路径，在页面上显示一个新的局部视图。我的新任务是让这些按钮中的一些触发ui.bootstrap与其中的视图折叠。 ui.bootstrap示例的标记是：

<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;
});

我想要的是展示我的部分内容＆＃34;一些内容＆＃34;在上面的标记内。因此，我会有这样的按钮：

缔约方|未来事件

当我点击Party时，它目前通过转到路径/ parties /：number来加载各方：number是要查看的案例编号。

我想要改变它的是相同的按钮，但当我点击缔约方时，它会滑动打开包含各方的DIV。我遇到的一个挑战是通过单独的Web服务检索各方，我不确定如何构建我的页面以将其隐藏在某处。是否可以在要求时加载它们？

我如何完成这项任务？最终，我需要使用从我的各种按钮触发的多个崩溃语句。这是因为我在这个页面上有多行数据。它甚至可能吗？

Answer 1

您可以在折叠面板中注入部分内容。这种方法非常简单易管理。控制器将注意哪些部分将被加载。

看看这个plunker。

在上面的示例中，我使用了一个简单的getter函数来获取部分并将其加载到我的面板中：

<div uib-collapse="Main.isCollapsed">
    <div class="well well-lg">
        <div ng-include="Main.getPartialUrl()"></div>
    </div>
</div>

使用ui.bootstrap折叠显示部分

1 个答案: