单击按钮打开AngularJS Accordion

时间:2014-06-23 22:54:06

标签: javascript jquery angularjs accordion angular-directive

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

在我看来,我有以下内容:

<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. 在每个组
  2. 上使用'is-open'完全打开手风琴
  3. 有些相关的设置“close-others = false”
  4. 我知道如何将这两个东西设置为默认值,但我的问题是我需要从我的控制器执行此操作,因为我基本上使用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
    
                }
            }
    

1 个答案:

答案 0 :(得分:0)

对于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;
                });
            }
        }
};

可能就是这样做......