尝试显示 json 数据时，物化折叠无法正常工作答案

【问题标题】：Materialize collapse is not working properly when trying to display json data尝试显示 json 数据时，物化折叠无法正常工作
【发布时间】：2015-06-20 16:32:42
【问题描述】：

这是折叠的代码，我正在使用物化 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>

在这里，我正在编写我的 Angular js 代码，用于从 json 中检索数据并尝试显示上述 html 代码。

$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});
        });
});

我能够在 html 代码中显示数据。但它并没有崩溃。我能够完美地检索 json 数据，并且 html 代码中没有语法错误。我仔细检查了它。请给我一些解决问题的想法。

【问题讨论】：

我从未使用过 Materialise，所以认为这只是一个疯狂的猜测，但可能你需要一些方法在数据准备好显示后重新初始化可折叠组件，所以让我们在你的 forEach 之后说.
嗨@Nobita 我不认为这是材料的问题......但我不明白重新初始化是什么意思......你能详细说明......

标签： json angularjs materialize

【解决方案1】：

完成“推送”后，您需要使用以下命令初始化可折叠： $('.collapsible').collapsible();

将这一行放在网站末尾的脚本中就足够了。必须在 angular done pushs 之后完成。

【讨论】：

推是什么意思？
在 JavaScript 中，您可以将新元素推送到数组中，例如，当您执行 x.push('4'); 时，您有数组 var x = [ 1, 2, 3]你得到 x = [1, 2, 3, 4];也可以重新初始化可折叠，只需放置 $('.collapsible').collapsible();在你的角度控制器中。
我在 Google 表格中遇到了类似的问题 - 在我添加了一些功能（我在那里推）后，折叠式没有打开。我在推入函数后插入了您的初始化代码，并在之前尝试过，但它没有用。怎么办？

【解决方案2】：

<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>

您需要在视图中以角度添加此行。

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

这个答案的灵感来自@Paweł Smołka 的答案，就我而言，我需要页面中的初始化，而不是控制器

【讨论】：

【解决方案3】：

我同意 Paweł Smołka 必须初始化 $('.collapsible').collapsible();

【讨论】：

【解决方案4】：

我遇到了同样的问题，我解决该问题的方法是在 class="collapsible" 之外添加 ng-repeat 并更改 CSS 以将每个单独的可折叠组合在一起。不需要 JQuery/Javascript 代码。 “缺点”是每个可折叠项都是相互独立的，因此如果一个标头展开，其他标头不会折叠。

例如我写你的例子如下：

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 代码
我为我的 GUI 删除了 box-shadow，但您可能希望保持外观。

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

 .collapsible-header{padding: 0;}
}

【讨论】：

【解决方案5】：

你应该阅读这个https://krescruz.github.io/angular-materialize/

materialize 库不能很好地支持 angular，因此他们的开发人员编写了另一个 javascript 文件来定义一些 angular 指令。

尝试在标题中包含以下行

<!-- 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>

一切都会变得正常

【讨论】：

【解决方案6】：

这可能是因为您的 UL 开口中缺少数据折叠标签。

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

来自http://materializecss.com/collapsible.html

【讨论】：