ng-switch 不适用于表的嵌套 ng-repeat

Question

使用嵌套的“ng-repeat”和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>