Question

我对angularJS很新。我有一个手风琴，我正在使用Angular ui bootstrap，我试图根据$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对象或您认为合适的任何方式

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

1 个答案: