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 con

Answer 1

Here a simple and easy solution on Angular JS using ng-repeat that might help.

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {

  $scope.arr= [
    {name:"Head1",desc:"Head1Desc"},
    {name:"Head2",desc:"Head2Desc"},
    {name:"Head3",desc:"Head3Desc"},
    {name:"Head4",desc:"Head4Desc"}
    ];
    
    $scope.collapseIt = function(id){
      $scope.collapseId = ($scope.collapseId==id)?-1:id;
    }
});

/* Put your css in here */
li {
  list-style:none;
  padding:5px;
  color:red;
}
div{
  padding:10px;
  background:#ffffd;
}

  
    
    
    



  

    
{{ret.name}}
    

      {{ret.desc}}
    
  

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