5

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

在这里，我正在编写我的 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 代码中没有语法错误。我仔细检查了它。请给我一些解决问题的想法。

4

6 回答 6

2

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

将此行放在网站末尾的脚本中就足够了。必须在角度完成推动后完成。

于 2015-07-02T13:25:35.227 回答
2

我遇到了同样的问题，我解决这个问题的方法是在 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;}
}
于 2016-02-19T16:03:31.907 回答
2

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

于 2015-12-30T17:13:46.087 回答
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 答案，就我而言，我需要页面中的初始化，而不是控制器

于 2015-11-02T22:42:02.387 回答
1

您应该阅读此https://krecruz.github.io/angular-materialize/

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

尝试在标题中包含以下行 

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

事情会变得正常

于 2016-11-09T12:14:56.323 回答
0

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

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

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

于 2015-07-16T20:34:08.220 回答