Question

大家好，这是插件http://mgcrea.github.io/angular-strap/##collapses

我正在尝试在我的应用中使用此插件但是没有做我想要的，我想更动态地使用它，正如您在网页上的示例中所看到的，您只能打开一个面板时间，我想给用户提供他们想要打开尽可能多的面板的选项，这是我的html：

  <div class="panel-group" ng-model="panels.activePanel" bs-collapse>
    <div class="panel panel-default"
      ng-repeat="sport in sports" ng-show="sport.leagues.length">
      <div class="panel-heading"
        bs-collapse-toggle
        ng-click="addSportToLines(sport)">
        <h4 class="panel-title">
          <a>
            {{::sport.name }}
          </a>
          <span class="pull-right badge">{{::sport.leagues.length }}</span>
        </h4>
      </div>
      <div class="panel-collapse" bs-collapse-target>
        <div class="panel panel-default">
            <div class="list-group">
              <a href="javascript:void(0);"
              class="list-group-item panel-padding"
              ng-repeat="league in sport.leagues"
              ng-class="{active: league.active}"
              ng-click="addLeagueToLines(league)">{{:: league.name }}</a>
            </div>
          </div>

有没有办法做到这一点，或者我需要使用其他工具？

Answer 1

如果你看一下angular-strap折叠控制here的源代码，你会注意到控制器内的这个功能：

self.$setActive = $scope.$setActive = function(value) {
    if(!self.$options.disallowToggle) {
        self.$targets.$active = self.$targets.$active === value ? -1 : value;
    } else {
        self.$targets.$active = value;
    }
    self.$viewChangeListeners.forEach(function(fn) {
        fn();
    });
};

正如您所看到的，$targets.$active是单个值，这意味着该指令一次只能容纳一个面板。要更改指令的功能，您必须对其进行分叉并进行必要的更改。

我会将我对类似问题的回答视为一种更好的方法。您不需要库/插件来获取您要查找的结果。请参阅：https://stackoverflow.com/a/27611923/277697

Angular-Strap崩溃插件，当时打开多个面板（？）

1 个答案: