Question

我是AngularJs开发的新手。我有以下代码

 <table id="searchTable" ng-show="results" class="table table-bordered table-hover table-list">
                        <thead search-table-header table="table" search="search()">

                        </thead>
                        <tbody>
                            @*<tr>
                                <th>Description</th>
                                <th>Type</th>
                            </tr>*@
                            <tr ng-repeat="result in results" ng-click="loadView(result)">

                                <td class="col-md-10">
                                    {{ result.descrip }}
                                    <span class="label label-danger pull-right" ng-show="result.hidden">Hidden</span>
                                </td>
                                <td class="col-md-2">
                                    {{ result.tmplType | passTicket}}
                                    <span class="label label-danger pull-right" ng-show="result.hidden">Hidden</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>

作为此代码的结果，列的标题显示Descrip和tmplType。您看到我尝试使用th引入标头，但这没有帮助，我的标题显示在错误的列标题下方。我不知道如何更改此代码（或者我应该在哪里更改代码）以显示正确的列标题？

我检查了searchTableHeader指令，它有以下html：

<tr style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;'>
    <th ng-repeat="column in table.columns" ng-click="sort(column)">
        {{ column.name }}
        <span class="pull-right" href="#" ng-show="column.name === table.sort">
            <i ng-class="{'icon-chevron-down': table.dir === 'asc', 'icon-chevron-up': table.dir === 'desc'}"></i>
        </span>
    </th>
</tr>

所以，我怀疑我需要以某种方式使这更灵活。这对我来说似乎并不简单 - 任何人都有想法吗？

更新。我取得了一些进展，现在我的任务如下：在一个特定视图的控制器中，我对原始代码进行了更改：

  $scope.table = searchScreenService.getTable('Descrip', [
                { name: 'Descrip', displayName: 'Description' }, { name: 'TmplType', displayName: 'Type' }
            ]);

所以，我刚刚添加了新属性displayName。

现在，在整个项目中使用的搜索标题模板中，我需要添加以下修改：目前我们使用{{column.name}}

如果该属性存在，我需要使用displayName，如果该属性不存在，则需要使用name。那么，你知道如何解决这一小段代码吗？

Answer 1

我在另一个论坛上找到了解决方案。在searchTableHeader模板中，我添加了此代码

<span ng-if="column.displayName == undefined || column.displayName == ''">{{column.name}}</span>
<span ng-if="column.displayName != undefined && column.displayName != ''">{{column.displayName}}</span>

现在我可以动态添加displayName属性（应该以不同方式命名），并且标题将正确显示。如果未定义该属性，则使用column.name。

如何添加正确的列标题

1 个答案: