最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - ExpandCollapse all function with AngularJS accordion - Stack Overflow

programmeradmin0浏览0评论

I am using the Angular UI accordion and I am trying to add a toggle button that will expand and collapse the panels. At present the panels will only open when a user clicks on the heading. The button I added toggles a variable 'isopen' to true or false but it does not seem to work.

Here is my code:

 <button ng-click="isopen =!isopen">expand/collapse</button> {{isopen}}
<accordion close-others="false">     

      <accordion-group is-open="isopen" ng-repeat="site in groups">
           <accordion-heading ng-click="isopen = !isopen">
           hey {{isopen}}
           </accordion-heading>
            hello
       </accordion-group>
</accordion>

And here is a plunker:

When a user clicks on a panel header it should open that panel only. The Toggle button will hopefully expand and collapse them all.

I am using the Angular UI accordion and I am trying to add a toggle button that will expand and collapse the panels. At present the panels will only open when a user clicks on the heading. The button I added toggles a variable 'isopen' to true or false but it does not seem to work.

Here is my code:

 <button ng-click="isopen =!isopen">expand/collapse</button> {{isopen}}
<accordion close-others="false">     

      <accordion-group is-open="isopen" ng-repeat="site in groups">
           <accordion-heading ng-click="isopen = !isopen">
           hey {{isopen}}
           </accordion-heading>
            hello
       </accordion-group>
</accordion>

And here is a plunker:

http://plnkr.co/edit/8AkWUxzOir5NNoA0fT5R?p=preview

When a user clicks on a panel header it should open that panel only. The Toggle button will hopefully expand and collapse them all.

Share Improve this question edited Aug 21, 2018 at 22:14 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked Apr 21, 2015 at 9:48 Jose the hoseJose the hose 1,89510 gold badges33 silver badges58 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

Your $scope changes inside accordion. Solution is attach this property in an object on $scope.

See working fiddle here.

Updated plunkr. It's not much difficult once you find out your mistake in previous question.

发布评论

评论列表(0)

  1. 暂无评论