2013-06-24 1 views
4

아코디언 본문에서 정적 내용을 얻는 방법을 볼 수는 있지만 동적 내용을 생성하는 방법을 알 수는 없습니다. 아코디언가 생성된다 http://angular-ui.github.io/bootstrap/의 일례를 촬영AngularJS Accordion 본문에서 동적 내용을 얻는 방법

...

$scope.groups = [ 
    { 
     title: "Dynamic Group Header - 1", 
     content: "Dynamic Group Body - 1" 
    }, 
    { 
     title: "Dynamic Group Header - 2", 
     content: "Dynamic Group Body - 2" 
    } 
    ]; 

내가 따라서 개의 레벨 구조에서 아코디언을 생성 달성하고자 ...

$scope.groups = [ 
    { 
     title: "Dynamic Group Header - 1", 
     items: {[item-title: "item 1", item-title: "item 2"]} 
    }, 
    { 
     title: "Dynamic Group Header - 2", 
     items: {[item-title: "item 3", item-title: "item 4"]} 
    } 
    ]; 

각 아코디언 몸과 같은 : - resu가

<div ng-repeat="item in group[n].items"><li>{{item.item-title}}</li></div> 

이러한 나는이 내용 아래에 넣어

Dynamic Group Header - 1 
. item 1 
. item 2 
Dynamic Group Header - 2 
. item 3 
. item 4 

무엇이든 간단히 처리하지 않고 innerHTML을 같이 인스턴스화하는 것 -이 : 같은 lting HTML 뭔가를 보인다.

답변

3

내가 완전히 사용 사례하지만 당신은 당신이 이렇게 (마크 업)처럼 그것을 간단하게 할 수 아코디언의 몸 내부의 품목 이상 반복합니다 가정 가지고 확실하지 않다 :

<accordion> 
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups"> 
     <ul> 
     <li ng-repeat="item in group.items">{{item['item-title']}}</li> 
     </ul> 
    </accordion-group> 
    </accordion> 

내가하려고했던 때를 귀하의 JSON을 예제로 사용하여 나는 그것이 형식화되지 않아서 당신이 직면 한 어려움의 일부가 될 수 있음을 발견했습니다.

$scope.groups = [ 
    { 
     title: "Dynamic Group Header - 1", 
     items: [{"item-title": "item 1"}, {"item-title": "item 2"}] 
    }, 
    { 
     title: "Dynamic Group Header - 2", 
     items: [{"item-title": "item 3"}, {"item-title": "item 4"}] 
    } 
    ]; 

및 작업 쿵하는 소리 :이 :-) 작동 http://plnkr.co/edit/pjaekUXzvMQn9mOOArIH?p=preview

+0

다음은 수정 된 JSON입니다. 잘못된 방향으로 벗어나 문제를 복잡하게 만들었다 고 생각합니다. 아코디언 그룹 내에서 간단한 HTML을 사용하는 대신 HTML을 content : 필드에로드하려고했습니다. 많은 감사합니다. – pinoyyid

+0

어떻게 KO JS에서 동일한 작업을 수행 할 수 있습니까? –