单击按钮打开 AngularJS Accordion答案

【问题标题】：Opening AngularJS Accordion on click of a button单击按钮打开 AngularJS Accordion
【发布时间】：2014-08-14 01:54:13
【问题描述】：

您好，我正在使用角度控制器和角度视图。

在我看来，我有以下几点：

<div ng-controller="AccordionDemoCtrl">
   <input type="search" class="form-control" ng-model="Filter" placeholder="Filter Search" />
    <accordion>
        <accordion-group ng-repeat="group in groups" heading="{{group.title}}">
        {{group.content}}
        </accordion-group>    
    </accordion>
</div>

然后在我的控制器中，我希望能够做两件事：

在每个组上使用“is-open”完全打开手风琴
有些相关的设置“close-others=false”

我知道如何将这两件事设置为默认值，但我的问题是我需要从我的控制器执行此操作，因为我基本上使用 ng-model 来查看搜索框中的更改以及用户启动的那一刻在此搜索框中输入我希望手风琴完全打开...最终我将使用用户 ._filter 实际进行过滤...但第一步是触发手风琴的打开

现在我的控制器看起来像这样

$scope.$watch("Filter", function (newVal, oldVal, scope) {
        console.log($scope.reportFilter);

        if ($scope.Filter)
        {
            if ($scope.Filter.length == 0){
                // close the accordion
                // show one at a time

            }

            else{

                // open the entire accordion

            }
        }

【问题讨论】：

标签： javascript jquery angularjs accordion angular-directive

【解决方案1】：

对于html：

<div ng-controller="AccordionDemoCtrl">
   <input type="search" class="form-control" ng-model="Filter" placeholder="Filter Search" />
    <accordion close-others="showOnlyOne">
        <accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.isThisOpen">
        {{group.content}}
        </accordion-group>    
    </accordion>
</div>

对于控制器：

$scope.showOnlyOne=true;
$scope.$watch("Filter", function (newVal, oldVal, scope) {
        console.log($scope.reportFilter);

        if ($scope.Filter)
        {
            if ($scope.Filter.length == 0){
                // close the accordion
                // show one at a time
                $scope.showOnlyOne=true;
                $scope.groups.forEach(function(group){
                    group.isThisOpen=false;
                });
            }

            else{
                $scope.showOnlyOne=false;
                // open the entire accordion
                $scope.groups.forEach(function(group){
                    group.isThisOpen=true;
                });
            }
        }
};

大概这样就可以了……

【讨论】：