嵌入式jquery ui手风琴与Angular

Question

如何使用Angular创建多级（嵌入式）jqueryui手风琴？

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

1. 1级
   1. 第1课
   2. 第2课
   3. 第3课
2. 等级2
   1. 第1课
   2. 第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>

这是带有用于测试的嵌入数据的Angular 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。注意覆盖以明确标识accordian标题元素（h2为Level，h3为Lesson）

(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"
    });
  });
}());