Fatal编程技术网

Javascript uib手风琴折叠手表

javascript angularjs

Javascript uib手风琴折叠手表,javascript,angularjs,accordion,ng-repeat,angularjs-ng-click,Javascript,Angularjs,Accordion,Ng Repeat,Angularjs Ng Click,我正试图观察uib accordion标题崩溃，uib accordion内容单击以确定是否启用图标。我可以通过在isOpen上编写watch函数和/或编写ng click函数部分实现这一点 但是，当用户单击第一个手风琴的标题（true）时，第一个手风琴的内容（true）将启用图标（预期）。但当用户从第二个accordion中单击标题时，它不会重置先前单击的内容事件 示例： 1. 'isClicked'应重置为false和/或 2.从打开到关闭再到打开的轨迹“等参线”过渡 灰线是当前状态，它的

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

但是，当用户单击第一个手风琴的标题（true）时，第一个手风琴的内容（true）将启用图标（预期）。但当用户从第二个accordion中单击标题时，它不会重置先前单击的内容事件

示例：
1. 'isClicked'应重置为false和/或
2.从打开到关闭再到打开的轨迹“等参线”过渡

灰线是当前状态，它的行为应该与步骤4中的行为类似（True&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;
        }

    }
});

}]);