ng-switch不能使用嵌套的ng-repeat

I am getting error while rendering table based on provided columns definitions and row data (2 different JSON objects) using nested 'ng-repeat' and ng-switch directives:

使用嵌套的“ng-repeat”和ng-switch指令，基于提供的列定义和行数据(两个不同的JSON对象)呈现表时，我得到了错误:

Is there any way to use 'ng-repeat' and ng-switch for rendering table cells without using wrapper elements.

是否有任何方法可以在不使用包装器元素的情况下使用“ng-repeat”和ng-switch来呈现表单元格。

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

Here is my table template

这是我的表格模板

<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>

Work around I made for time being

围绕着我的时间工作

I am using ng-if to render table cell and rows dynamically in following way:

我使用ng-if动态渲染表单元格和行，如下:

<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>

How can I achieve same output using ng-switch without using additional elements?

如何在不使用其他元素的情况下使用ng-switch实现相同的输出?

1 个解决方案

#1

The ng-switch-when directive should be applied on a child element of the element where the ng-switch directive is applied. In your case, you applied them on the same element.

当使用ng-switch指令的元素的子元素时，应使用ng-切换指令。在您的例子中，您将它们应用到同一个元素上。

Try (inside 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>

#1