javascript - 单击按钮打开 AngularJS Accordion

Question

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

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

<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>

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

1. 在每个组上使用 'is-open' 完全打开手风琴
2. 有点相关的设置“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

            }
        }

Answer 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;
                });
            }
        }
};

大概这样就可以了...