嵌入角的jqueryui手风琴

Question

如何使用角度创建多层次(嵌入式) jqueryui手风琴？

布局应该有具有此层次结构的可排序部分：

1. 一级
   1. 第一课
   2. 第二课
   3. 第3课

​

1. 2级
   1. 第一课
   2. 第二课
   3. 第3课

​

Answer 1

这是我的解决办法。

HTML

        <div ng-controller="startLessonController">
        <div id="accordianLevel">
            <div ng-repeat="level in course.levels" >
              <h2> {{level.number}} - {{level.name}}: {{level.title}}</h2>
                <div >
                    {{level.description}}
                    <div id="accordianLesson">
                        <div ng-repeat="lesson in level.lessons" >
                          <h3> {{lesson.number}} - {{lesson.name}}: {{lesson.title}}</h3>
                             <ul>
                                <li ng-repeat="goal in lesson.goals">{{goal}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

以下是带有嵌入式测试数据的角js (截断)

var startLessonApp = angular.module('startLessonApp', []);
startLessonApp.controller('startLessonController', ['$scope', function($scope) {
$scope.course = {
"levels": [
 {
  "number": 1,
  "name": "Level One",
  "title": "Conversation Starters",
  "lessons": [
    {
      "number": 1,
      "name": "Lesson One"
    }
  ]
 }
};

这里是初始化手风琴的js。注意，重写可以显式标识手风琴标题元素(h2表示级别，h3表示教训)

(function () {
  "use strict";
  $(document).ready(function () {
    $( "#accordianLevel" ).accordion({
        header: "h2",
        collapsible: true,
        active:false,
        heightStyle:"content"
    });
            $( "#accordianLesson" ).accordion({
        collapsible: true,
        header: "h3",
        active:false,
        heightStyle:"content"
    });
  });
}());

​

​