Угловой: переключатель внутри повтора, проблемы с памятью

Question

Я строию tr с различными tdКомпоненты внутри.

Существует множество различных tdкомпонентов и только некоторые из них будут визуализированы.

<tr ng-repeat='row in rowlist'> 
    <td ng-repeat='columnType in columnsThatShouldBeDisplayed' ng-switch='columnType'> 
    <colA ng-switch-when='typeA'></colA> 
    <colB ng-switch-when='typeB'></colB> 
    <colC ng-switch-when='typeC'></colC> 
    // and so on.. 
    <td> 
</tr> 

Это занимает много места. Кажется, что все мои компоненты построены, но для каждой итерации отображается только одна.

Каков правильный способ сделать это? Советы о том, как решить проблему и сделать это по-другому?

Answer 1

Вы должны включить нг-переключатель в качестве атрибута повтора элемента

<div ng-controller="formPersonalInfoController"> 
    <form role="form"> 
     <div ng-repeat="Country in Countries" class="animate-switch-container" ng-switch on="Country.name"> 
      <div> 
       <div class="animate-switch" ng-switch-when="Andorra"> 
        <div class="form-group"> 
         <div class="col-md-6"> 
          <label class="text-info">{{ Country.name }} :</label> 
         </div> 
         <div class="col-md-6"> 
          <textarea id="{{Country.Id}}" class="form-control" placeholder="{{ Country.name }}"></textarea> 
         </div> 
        </div> 
       </div> 
       <div class="animate-switch" ng-switch-default> 
        <div class="form-group"> 
         <div class="col-md-6"> 
          <label class="text-info">{{ Country.name | uppercase }} :</label> 
         </div> 
         <div class="col-md-6"> 
          <input id="{{Country.Id}}" class="form-control" type="text" placeholder="{{ Country.name }}" /> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
</form> 
</div>