Question

我试图观看uib-accordion标题崩溃和uib-accordion内容点击以确定是否启用Icon。我可以通过在isOpen上编写watch函数和/或编写ng-click函数来实现这一点。

然而，当用户点击第一个手风琴的标题（true）时，第一个手风琴的内容（true）会启用Icon（预期）。但是当用户点击第二个手风琴的标题时，它不会重置之前点击的内容事件。

示例：
1.＆＃39; isClicked＆＃39;应重置为false和/或
2.跟踪＆＃39; isOpen＆＃39;从开幕到闭幕到开幕。

灰色线是当前条件而不是它应该像步骤4中那样（True＆amp; false = False）

HTML

<body ng-app="myApp">
        <div class="col-sm-6" ng-controller="Controller">
            <div class="column-nav">
                <uib-accordion close-others="oneAtATime">
                    <uib-accordion-group ng-repeat="group in groups" ng-scroll="group in groups" is-open="group.isOpen" ng-click="updateOpenStatus()">
                        <uib-accordion-heading ng-model="checkTitle">
                            {{group.title}}
                        </uib-accordion-heading>
                            <div><a ng-click="updateClickStatus()">{{group.content}}</a></div>
                    </uib-accordion-group>
                </uib-accordion>
            </div>
            <div>
                Panel Header Open: {{isOpen}} <br>
                Panel Content Click: {{isClicked}} <br>
                Panel state : {{state}} <br>
                Eable based on accordion open/close : {{enable}} <br> <br>

                <b>Show Icon [Result] :</b>  <span ng-if ="isClicked && isOpen"> True</span> <br>

            </div>
        </div>  
    </body>

脚本

myApp.controller('Controller', ['$scope', function($scope) {
    $scope.oneAtATime = true;
    $scope.isOpen = false;
    $scope.isClicked = false;
    $scope.enable = false;

    // Data 
     $scope.groups = [
    {
      title: "Dynamic Group Header - 1",
      content: "Content - 1"
    },
    {
      title: "Dynamic Group Header - 2",
      content: "Content - 2"
    }
    ];

  $scope.updateOpenStatus = function(){
    $scope.isOpen = $scope.groups.some(function(item){
      return item.isOpen;
    });
    console.log($scope.isClicked);
  }

  $scope.updateClickStatus = function(){
    $scope.isClicked = true;
  }

  $scope.$watch('isOpen', function(newval, oldval){
    if(oldval !== newval) {
        $scope.state = newval ? 'opening' : 'closing';
        console.log($scope.state);

        if ( $scope.state =='opening' || $scope.state =='closing')
        {
            $scope.enable = !$scope.enable;
        }

    }
});

}]);

Plunker参考代码

感谢您的帮助或建议。

uib-accordion折叠式手表，角度为js

0 个答案: