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嵌套手风琴

回答

相关问题