Materialize collapse is not working properly when trying to display json data

Question

Here is the code for collapsing and I am using materialize css.

<ul id="ulcollapse" class="collapsible">
                        <li id="licollapse" ng-repeat="single in packageNames">
                            <div class="collapsible-header">{{single.name}}</div>
                            <div class="collapsible-body"><p>{{single.name}}</p></div>
                        </li>
                    </ul> 

And here I am writing my angular js code for retrieving the data from json and trying to display the above html code.

$scope.packageNames = [];
$http.get('data.json').then(function(res){
    $scope.packagesData = res.data; 

    angular.forEach($scope.packagesData.Packages,function(value, key) {
            $scope.packageNames.push({name:value.Name,content:value.Content});
        });
});

I am able to display the data in the html code. But it is not getting collapsed. I am able to retrieve the json data perfectly and there is not syntax wrong in the html code. I double checked it. Please give me some ideas to solve the problem.

Answer 1

I hit the same issue, and the way I worked around the problem is to add ng-repeat outside class="collapsible" and change CSS to combine each single collapsible together. No JQuery/Javascript code is needed. The "downside" is every collapsible is independent of each other, so if one header is expanded, the other headers won't collapse.

e.g. I wrote your example as follows:

HTML

<div class="single-collapsible" ng-repeat="single in packageNames">
  <ul id="ulcollapse" class="collapsible">
    <li id="licollapse">
      <div class="collapsible-header">{{single.name}}</div>
      <div class="collapsible-body"><p>{{single.name}}</p></div>
    </li>
  </ul> 
</div>

SCSS/CSS code
I removed box-shadow for my GUI, but you might want to keep the look.

.single-collapsible{
 .collapsible{
    box-shadow: none;
    margin-bottom: -1rem;}

 .collapsible-header{padding: 0;}
} 

Answer 2

I agree with Paweł Smołka must initialize $('.collapsible').collapsible();

Answer 3

You should read this https://krescruz.github.io/angular-materialize/

materialize library does't support well with angular so their developers wrte another javascript file defining some angular directives.

Try to include the following lines in your header

<!-- JavaScript for: jQuery, angular, materialize, and angular-materialize. All of which are needed. -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script>

Things will become normal

Answer 4

After you have done 'pushing' you need to initialize your collapsible with: $('.collapsible').collapsible();

It is enough to place this line in a script at the end of website. It must be done after angular done pushes.

Answer 5

It may be because you are missing the data-collapsible tag in your UL opening.

  <ul class="collapsible" data-collapsible="accordion">

From http://materializecss.com/collapsible.html

Answer 6

<ul id="ulcollapse" class="collapsible">
                    <li id="licollapse" ng-repeat="single in packageNames">
                        <div class="collapsible-header">{{single.name}}</div>
                        <div class="collapsible-body"><p>{{single.name}}</p></div>
                    </li>
                </ul> 

You need to add this line in your view in angular.

<script>$('.collapsible').collapsible();</script>

This answer is inspired from @Paweł Smołka answer, just in my case i needed the initialization in the page, not the controller