Question

我的范围看起来像这样

$scope.audit = [{
    "specification": "Test1",
    "username":"user1",
    "lastname":"lastname1"
},
{
    "specification": "Test1",
    "username":"user2",
    "lastname":"lastname2"
},
{
    "specification": "Test2",
    "username":"user1",
    "lastname":"lastname1"
},
{
    "specification": "Test2",
    "username":"user2"
    "lastname":"lastname2"
}]

我groupBy规范，并有两个按钮作为过滤器username和lastname，可以点击这些按钮来过滤数据。规范和过滤器是手风琴标题的一部分。

现在，当我点击规格标题时，面板打开很好。但是如何使用滤镜按钮打开手风琴呢？如果面板处于打开状态，如何保持打开并且不切换数据？

HTML

<div class="modal-body" style="max-width: 1600px; margin: 0 auto; overflow: hidden;">
    <accordion close-others=false> 
        <accordion-group is-open="open" data-ng-repeat="(spec,value) in audit | orderBy: 'specification' | groupBy: 'specification'"> 
            <accordion-heading>
                <i class="glyphicon" ng-class="{'glyphicon-chevron-down': open, 'glyphicon-chevron-right': !open}"></i> 
                <b>{{spec}}</b>

                <div class="btn-toolbar pull-right" ng-click="$event.stopPropagation();$event.preventDefault();" >
                    <div class="btn-group pull-right" > 
                        <button data-style="slide-right" ng-click="Activate(this,'username')" type="button" class="btn btn-xs">
                            <i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
                            Username
                        </button>               
                    </div>

                    <div class="btn-group pull-right" > 
                        <button data-style="slide-right" ng-click="Activate(this,'lastname')" type="button" class="btn btn-xs">
                            <i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
                            Lastname
                        </button>               
                    </div>
                </div>  
            <accordion-heading> 

            <div data-ng-repeat="val in value">
                {{val.username}} -- {{val.lastname}}
            </div>
        <accordion-group>   
    <accordion>
</div>

根据我目前点击Activate()的方法，我将open的值设置为true，但这会打开所有手风琴。

使用Javascript：

$scope.Activate = function(val,filter) {
    if (!$scope.open) {
        $scope.open = true;
    }
}

Answer 1

你正在寻找这样的东西吗？

HTML代码

<div class="modal-body" style="max-width: 1600px; margin: 0 auto; overflow: hidden;">
    <accordion close-others=false>
        <accordion-group is-open="open" data-ng-repeat="(spec,value) in audit | groupBy:'specification'">
            <accordion-heading class="col-lg-12">
                <i class="glyphicon" ng-class="{'glyphicon-chevron-down': open[$index], 'glyphicon-chevron-right': !open[$index]}"></i>
                <b ng-click="Activate($index)">{{spec}}</b>
                <div class="btn-toolbar pull-right" ng-click="$event.stopPropagation();$event.preventDefault();">
                    <div class="btn-group pull-right">
                        <button data-style="slide-right" ng-click="Activate($index)" type="button" class="btn btn-xs">
                            <i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
                            Username
                        </button>
                    </div>

                    <div class="btn-group pull-right">
                        <button data-style="slide-right" ng-click="Activate($index)" type="button" class="btn btn-xs">
                            <i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
                            Lastname
                        </button>
                    </div>
                </div>
            </accordion-heading>
            <div ng-show="open[$index]" ng-hide="!open[$index]">
                <span class="col-lg-12" data-ng-repeat="val in value">{{val.username}} -- {{val.lastname}}</span>
            </div>
        </accordion-group>
    </accordion>
</div>

的JavaScript

$scope.open = [];
$scope.Activate = function (ind) {

    if (!$scope.open[ind]) {
        $scope.open[ind] = true;
    }
    else
    {
        $scope.open[ind] = false;
    }
}

使用按钮拨动手风琴，如果打开，请保持打开状态

1 个答案: