如何动态打开和关闭 Angular ui 手风琴？

Question

我对 angularJS 还很陌生。我有一个手风琴，我正在使用 Angular ui 引导程序，我正在尝试根据$routeparams 章节动态打开和关闭手风琴。问题是因为每次用户单击菜单链接时页面都会重新加载，手风琴关闭。如何根据路线动态打开和关闭手风琴。这是我下面的内容。

这里是手风琴代码。这是在 html 文件中。我使用演示只是为了测试这一点。基本上，这个菜单中有多个章节，我需要在加载该路线时打开手风琴。

<accordion-group is-open="par()">
    <accordion-heading>
        <i class="fa fa-book"></i> Chapter 1<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
    </accordion-heading>
    <accordion  close-others="oneAtATime">
      <accordion-group is-open="par()">
      <accordion-heading>
        Practice <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status2.open, 'glyphicon-chevron-right': !status2.open}"></i>
    </accordion-heading>
        <ul ng-controller="mainCtrl">
            <li ng-repeat="words in allTerms1 track by $index"  ng-class="{ 'active': $index == selectedIndex}"><a href  id="{{ $index }}" ng-click="testing($event, 1); PracticeTerm(1); itemClicked($index);">{{words.term}}</a></li>
        </ul>
      </accordion-group>
      <accordion-group is-open="par()">
       <accordion-heading>
        Review<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status3.open, 'glyphicon-chevron-right': !status3.open}"></i>
    </accordion-heading>
        <ul ng-controller="mainCtrl">
            <li ng-repeat="words in allTerms1 track by $index" ><a href class="{{$index}}" id="{{ $index }}" ng-click="testing($event, 1); ReviewTerm(1);">{{ words.term }}</a></li>
        </ul>
      </accordion-group>
    </accordion>
</accordion-group>

这是我的控制器，也是我尝试编写一个基于路由打开手风琴的函数。它不能正常工作，因为当它返回 true 时，菜单卡在打开状态，用户无法再关闭它。我不知道应该如何解决这个错误。

app.controller('AccordionDemoCtrl', function($scope, $location, $routeParams, $route) {
$scope.change = [{
    'one': 'Chapter-1',
    open: true
}];
$scope.par = function() {
    if ($routeParams.chapters == $scope.change[0].one) {
        return $scope.change[0].open;
    }
};
});

这是手风琴演示控制器

` app.controller('AccordionDemoCtrl', function($scope) { $scope.oneAtATime = true;

$scope.groups = [{
    title: 'Dynamic Group Header - 1',
    content: 'Dynamic Group Body - 1'
}, {
    title: 'Dynamic Group Header - 2',
    content: 'Dynamic Group Body - 2'
}];

$scope.items = ['Item 1', 'Item 2', 'Item 3'];

$scope.addItem = function() {
    var newItemNo = $scope.items.length + 1;
    $scope.items.push('Item ' + newItemNo);
};

$scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
};
});`

Answer 1

par() 在没有每个级别唯一的参数的情况下做得不好。

我不知道你在路由中使用了什么样的值，所以会假设它们类似于 chapter-NUMBER 并将其用作参数

HTML

<accordion-group is-open="par('chapter-1')">

JS

$scope.par = function(chapter) {
    return $routeParams.chapters === chapter;   
};

您可以修改它以将数字或索引传递给您的 change 对象或您认为合适的任何方式