Expand and collapse with angular js

Question

I am trying to figure out a way to do an expand and collapse using angular js  I haven t been able to find an elegant way to do this without manipulating dom objects in the controller  which is not the angular way   Currently I have a nice way to do it for a one layer expand and collapse  However when I start nesting  things get complicated and don t work the way I want it to  expanding and collapsing multiple areas when they shouldn t be   The problem comes in by me not knowing how to send a unique identifier with an ng-click to only expand collapse the right content  I should mention that these items are in an ng-repeat so I can necessarily customize parameters being sent   I was able to use this jsfiddle to help me get a one layer expand and collapse to work  However this is a toggle way to do it and I want the user to be able to keep things expanded while expanding others  So what I did to fix this was use an array of and every time something is clicked the index of that clicked item would be added to the array and the class expanded  When the user clicked again the index was removed from the array and the area was collapsed   Another way I found that you can do it is by using directives  But I can t really find any exampled to wrap my head around how directives work  I am not sure how to even start when it comes to writing directives   My current set up is this   function Dexspander  scope         scope ExpandArray              Push or pop necessary elements for tracking      scope DespopulatArray   function  identifier  element        if    indexOf  scope ExpandArray  identifier   element     -1                 scope ExpandArray splice   indexOf  scope ExpandArray  identifier   element   1             else                scope ExpandArray push identifier   element                          Change class of necessary elements      scope Dexspand   function  identifier  element            if    indexOf  scope ExpandArray  identifier   element     -1                return  expand             else               return  collapse                       lt div class  user-header  ng-repeat  user in users  gt       lt h1 ng-click  DespopulatArray  user    index   gt Expand lt  h1 gt   lt  div gt   lt div class  user-content  ng class  Dexspand  user    index   gt       lt div class  content  gt           lt div class  user-information  gt               lt div class  info-header  gt                   lt h1 ng-click  DespopulatArray  info    index  gt Some Information lt  h1 gt               lt  div gt               lt div class  info-contents  ng class  Dexspand  info    index   gt                  stuff stuff stuff stuff                 lt  div gt           lt  div gt       lt  div gt   lt  div gt    The issue with this setup is that if I have to parent divs expanded and those both have something under them to expand  clicking the expand text will expand them in both areas as they are not unique

User · Accepted Answer

The problem comes in by me not knowing how to send a unique identifier with an ng-click to only expand/collapse the right content.

You can pass $event with ng-click (ng-dblclick, and ng- mouse events), then you can determine which element caused the event:

<a ng-click="doSomething($event)">do something</a>

Controller:

$scope.doSomething = function(ev) {
    var element = ev.srcElement ? ev.srcElement : ev.target;
    console.log(element, angular.element(element))
    ...
}

See also http://angular-ui.github.com/bootstrap/#/accordion

User · Answer

See http   angular-ui github io bootstrap   collapse  function CollapseDemoCtrl  scope       scope isCollapsed   false        lt div ng-controller  CollapseDemoCtrl  gt       lt button class  btn  ng-click  isCollapsed    isCollapsed  gt Toggle collapse lt  button gt       lt hr gt       lt div collapse  isCollapsed  gt           lt div class  well well-large  gt Some content lt  div gt        lt  div gt   lt  div gt

User · Answer

You can solve this fully in the html    lt div gt     lt input ng-model collapse type checkbox gt Title    lt div ng-show collapse gt       Only shown when checkbox is clicked    lt  div gt   lt  div gt    This also works well with ng-repeat since it will create a local scope for each member    lt table gt     lt tbody ng-repeat  m in members  gt       lt tr gt          lt td gt  lt input type checkbox ng-model collapse gt  lt  td gt          lt td gt   m title   lt  td gt       lt  tr gt       lt tr ng-show collapse gt         lt td gt   lt  td gt         lt td gt    m content    lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    Be aware that even though a repeat has its own scope  initially it will inherit the value from collapse from super scopes  This allows you to set the initial value in one place but it can be surprising   You can of course restyle the checkbox  See http   jsfiddle net azD5m 5   Updated fiddle  http   jsfiddle net azD5m 374  Original fiddle used closing  lt  input gt  tags to add the HTML text label instead of using  lt label gt  tags

User · Answer

I just wrote a simple zippy collapsable using Angular using ng-show  ng-click and ng-init  Its implemented to one level but can be expanded to multiple levels easily   Assign a boolean variable to ng-show and toggle it on click of header   Check it out here

User · Answer

In html  button ng-click  myMethod    gt Videos lt  button gt    In angular    scope myMethod   function                   collapse   collapse  hide         if you want to hide              collapse   collapse  toggle       if you want toggle              collapse   collapse  show         if you want to show

User · Answer

Here a simple and easy solution on Angular JS using ng-repeat that might help    x000D   x000D  var app   angular module  myapp        x000D   x000D  app controller  MainCtrl   function  scope    x000D   x000D     scope arr    x000D       name  Head1  desc  Head1Desc    x000D       name  Head2  desc  Head2Desc    x000D       name  Head3  desc  Head3Desc    x000D       name  Head4  desc  Head4Desc   x000D         x000D       x000D       scope collapseIt   function id   x000D         scope collapseId     scope collapseId  id  -1 id  x000D        x000D      x000D     Put your css in here    x000D  li   x000D    list-style none  x000D    padding 5px  x000D    color red  x000D    x000D  div  x000D    padding 10px  x000D    background  ddd  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html ng-app  myapp  gt  x000D     lt head gt  x000D       lt meta charset  utf-8    gt  x000D       lt title gt AngularJS Simple Collapse lt  title gt  x000D       lt script data-require  angular js 1 5 x  src  https   cdnjs cloudflare com ajax libs angular js 1 5 11 angular min js  data-semver  1 5 11  gt  lt  script gt  x000D   lt  head gt  x000D   lt body ng-controller  MainCtrl  gt  x000D   lt ul gt  x000D     lt li ng-repeat  ret in arr track by  index  gt  x000D       lt div ng-click  collapseIt  index   gt   ret name   lt  div gt  x000D       lt div ng-if  collapseId   index  gt  x000D          ret desc   x000D       lt  div gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    This should fulfill your requirements  Here is a working code   Plunkr Link  http   plnkr co edit n5DZxluYHi8FI3OmzFq2 p preview  Github  https   github com deepakkoirala SimpleAngularCollapse

[javascript] Expand and collapse with angular js

Examples related to javascript

Examples related to expand

Examples related to collapse

Examples related to angularjs