NG-開關不能使用嵌套NG-重複工作表

Question

同時採用嵌套「NG重複」和ng-switch指令渲染根據所提供的列定義和行數據（2個不同的JSON對象）表我得到錯誤：

有沒有什麼辦法可以在不使用包裝元素的情況下使用'ng-repeat'和ng-switch來渲染表格單元格。

Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found! 

這裏是我的表模板，我周圍

<table id={{metaData.id}} name="{{metaData.name}}" class="{{metaData.classes}}"> 
<tbody> 
    <tr ng-repeat="record in data"> 
     <td ng-repeat="col in metaData.columns" ng-switch on="col.type" 
     ng-switch-when="index"> {{record.$index + 1}} </td> 
    </tr> 
</tbody> 

工作時提出的是

我使用ng-if渲染表cell和rows動態地以下方式：

<table id={{metaData.id}} name="{{metaData.name}}" class="{{metaData.classes}} vk-table" > 
     <tbody> 
      <tr ng-repeat="record in data | orderBy : sortBy : reverse"> 
       <td ng-repeat-start="col in metaData.columns" ng-if="col.type == 'index'"> {{$parent.$parent.$index + 1}}. </td> 
       <td ng-if="col.type =='name'">{{record.name = [record.fname, record.mname, record.lname].join(' ') }}</td> 
       <td ng-if="col.type =='date'">{{record[col.dataKey] = toDate(record[col.dataKey]) | date : 'mediumDate'}}</td> 
       <td ng-if="col.type =='inMobile'"> 
        <a href="tel:{{record[col.dataKey]}}">{{record[col.dataKey]}}</a> 
       </td> 
       <td ng-if="col.type =='email'"> 
        <a href="mailto:{{record[col.dataKey]}}">{{record[col.dataKey]}}</a> 

       </td> 
       <td ng-if="col.type =='gender'">{{record[col.dataKey] == 'm' ? 'Male' : 'Female'}}</td> 
       <td ng-if="col.type =='place'">{{record[col.dataKey].name}}</td> 
       <td ng-repeat-end ng-if="!col.type">{{record[col.dataKey]}}</td> 
      </tr> 
     </tbody> 
    </table> 

如何在不使用其他元素的情況下使用ng-switch實現相同的輸出？

Answer 1

ng-switch-when指令應該應用於應用ng-switch指令的元素的子元素。就你而言，你將它們應用於相同的元素。

嘗試（內TBODY）

<tr ng-repeat="record in data | orderBy : sortBy : reverse"> 
    <td ng-repeat="col in metaData.columns"> 
     <div ng-switch on="col.type"> 
      <div ng-switch-when="index"> 
       {{record.$index + 1}} 
      </div> 
      <div ng-switch-when="name"> 
       {{record.name = [record.fname, record.mname, record.lname].join(' ') }} 
      </div> 
      <div ng-switch-when="date"> 
       {{record[col.dataKey] = toDate(record[col.dataKey]) | date : 'mediumDate'}} 
      </div> 
      <div ng-switch-when="inMobile"> 
       <a href="tel:{{record[col.dataKey]}}">{{record[col.dataKey]}}</a> 
      </div> 
      <div ng-switch-when="email"> 
       <a href="mailto:{{record[col.dataKey]}}">{{record[col.dataKey]}}</a> 
      </div> 
      <div ng-switch-when="gender"> 
       {{record[col.dataKey] == 'm' ? 'Male' : 'Female'}} 
      </div> 
      <div ng-switch-when="place"> 
       {{record[col.dataKey].name}} 
      </div> 
      <div ng-switch-default> 
       {{record[col.dataKey]}} 
      </div> 
     </div> 
    </td> 
</tr>