AngularJS與ng-repeat嵌套手風琴

我有一個4級模型，我需要創建嵌套的手風琴。然而，我不明白爲什麼當我點擊一個孩子時，所有的sibbligs打開（或關閉）。AngularJS與ng-repeat嵌套手風琴

我正在使用ui.bootstrap。下面是我使用的代碼（短版本反正）：

<div ng-controller="ProgramasController as vm"> 
    <accordion> 
     <accordion-group ng-repeat="programa in programas" is-open="status.open"> 
      <accordion-heading> 
       <i class="fa fa-lg" ng-class="{'fa-minus-circle': status.open, 'fa-plus-circle': !status.open}"></i> {{programa.xrmName}} 
      </accordion-heading> 
      <accordion close-others="false"> 
       <accordion-group ng-repeat="tipoDeAtencion in tiposDeAtencion" is-open="status.innerOpen"> 
        <accordion-heading> 
         <i class="fa fa-lg" ng-class="{'fa-minus-circle': status.innerOpen, 'fa-plus-circle': !status.innerOpen}"></i> {{tipoDeAtencion.xrmName}} 
        </accordion-heading> 
        <div> 
         algo 
        </div> 
       </accordion-group> 
      </accordion> 
     </accordion-group> 
    </accordion> 
</div>

來源

2015-10-06 aplon

在programas每個programa使用相同status.open變量。

我想你想切換到使用programa本身的屬性，如programa.open;請注意，您可能需要將每個字段初始化爲false。

您需要對status.innerOpen應用相同的更改並將其更改爲tipoDeAtencion.open。

來源

2015-10-06 00:55:34 Blaskovicz

謝謝代理B :)。你指出我正確的方向。不過，我對Angular完全陌生（這是我的第一次嘗試），我從GET獲取模型。我應該如何將該屬性添加到模型中？還是應該將屬性包含在WebApi模型中，並將其與模型的其餘部分一起傳遞？ – aplon

您指引我朝着正確的方向前進，並讓它正常工作。你是@Blaskovics代理人。 – aplon

Angular是模型不可知的。如果你從GET（例如'http.get'）加載它，那麼它可能只是簡單的ole json（javascript對象），你可以根據需要添加或刪除屬性（例如：var obj = {}; obj.foo =「bar」;'）。 – Blaskovicz

您可能希望使用屬性從迭代對象來處理開放狀態，如下所示：

<div ng-controller="ProgramasController as vm"> 
<accordion> 
    <accordion-group ng-repeat="programa in programas" is-open="programa.open"> 
     <accordion-heading> 
      <i class="fa fa-lg" ng-class="{'fa-minus-circle': programa.open, 'fa-plus-circle': !programa.open}"></i> {{programa.xrmName}} 
     </accordion-heading> 
     <accordion close-others="false"> 
      <accordion-group ng-repeat="tipoDeAtencion in tiposDeAtencion" is-open="tipoDeAtencion.open"> 
       <accordion-heading> 
        <i class="fa fa-lg" ng-class="{'fa-minus-circle': tipoDeAtencion.open, 'fa-plus-circle': !tipoDeAtencion.open}"></i> {{tipoDeAtencion.xrmName}} 
       </accordion-heading> 
       <div> 
        algo 
       </div> 
      </accordion-group> 
     </accordion> 
    </accordion-group> 
</accordion>

所以手風琴組及其項目的每個級別打開狀態將是獨一無二的。

來源

2015-10-06 01:10:38

AngularJS與ng-repeat嵌套手風琴

回答

相關問題