Как закрыть uib-аккордеон изнутри нажатием кнопки

Question

Я хотел бы закрыть аккордеон изнутри нажатием кнопки. Я пытаюсь установить isOpen на false, но он не работает. Есть ли способ закрыть его при нажатии кнопки? Спасибо.

Plunker здесь: https://plnkr.co/edit/3xMnWRPOoEHPmguaQxd0?p=preview

<div uib-accordion-group is-open="isOpen" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> 
    {{group.content}} 
    <button ng-click="close()">close this</button> 
</div> 

$scope.groups = [ 
    { 
     title: 'Dynamic Group Header - 1', 
     content: 'Dynamic Group Body - 1' 
    }, 
    { 
     title: 'Dynamic Group Header - 2', 
     content: 'Dynamic Group Body - 2' 
    } 
    ]; 


    $scope.isOpen = false; 

    $scope.close = function(){ 
    $scope.isOpen = false; 
    } 

Answer 1

Я смог достичь того, что мне было нужно, слегка изменив решение @MrNobody.https://plnkr.co/edit/cYb5jIi3LBslUDO8xfg4?p=preview

Вид:

<uib-accordion close-others="true"> 
    <div uib-accordion-group is-open="isOpen[$index]" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> 
     {{group.content}} 
     <button ng-click="close($index)">close this</button> 
    </div> 
    </uib-accordion> 
    <button ng-click="closeFromOutside()">close from outside</button> 

Контроллер:

$scope.isOpen = []; 

    $scope.groups = [ 
    { 
     title: 'Dynamic Group Header - 1', 
     content: 'Dynamic Group Body - 1' 
    }, 
    { 
     title: 'Dynamic Group Header - 2', 
     content: 'Dynamic Group Body - 2' 
    } 
    ]; 

    $scope.close = function(index){ 
    $scope.isOpen[index] = false; 

    } 
    $scope.closeFromOutside = function(){ 
    $scope.isOpen = []; 
    } 

Answer 2

Вы должны установить $scope.isOpen в true, когда вы показываете на аккордеоне, а затем $scope.isOpen = false закроет аккордеона.

EDIT: есть plunker https://plnkr.co/edit/RbbbwGaqGq8gG0JYseYw?p=preview

Answer 3

Я положил IsOpen в коллекции, чтобы иметь отдельный переключатель для каждого Accordian таблетки (что делает каждую таблетку тумблер отдельно), и она работает, проверьте код ниже:

контроллер:

$scope.groups = [ 
{ 
    title: 'Dynamic Group Header - 1', 
    content: 'Dynamic Group Body - 1', 
    isOpen: false 
}, 
{ 
    title: 'Dynamic Group Header - 2', 
    content: 'Dynamic Group Body - 2', 
    isOpen: false 
} 
]; 

$scope.items = ['Item 1', 'Item 2', 'Item 3']; 

$scope.addItem = function() { 
    var newItemNo = $scope.items.length + 1; 
    $scope.items.push('Item ' + newItemNo); 
}; 

$scope.close = function(group){ 
    group.isOpen = false; 
}; 

Вид:

<div uib-accordion-group is-open="group.isOpen" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> 
    {{group.content}} 
    <button ng-click="close(group)">close this</button> 
</div> 

Я изменил свой plunker: https://plnkr.co/edit/pBT0fbNJtQhgc5kZlLbO?p=preview

Answer 4

Вы можете использовать ng-init назначить новый атрибут isOpen в то время как цикл с ng-repeat. Updated Plunker code.

Изменить шаблон без добавления атрибутов в контроллере:

<div uib-accordion-group ng-init="group.isOpen=false" is-open="group.isOpen" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> 
    {{group.content}} 
    <button ng-click="group.isOpen=false">close this</button> 
</div> 

EDIT:

Если вы не хотите, чтобы изменить существующий объект, то вы можете иметь массив isOpen который поддерживает открытое состояние аккордеона групп. Plunker code.

<uib-accordion close-others="oneAtATime" ng-init="isOpen=[]"> 

    <div uib-accordion-group ng-init="isOpen[$index]=false" is-open="isOpen[$index]" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> 
     {{group.content}} 
     <button ng-click="isOpen[$index]=false">close this</button> 
    </div> 

</uib-accordion>