Question

我正在为我的应用程序使用angularjs，我有

$scope.columns = [
                                        {
                                          "displayName": "Column A",
                                          "selected": true,
                                          "sortable": true
                                        },
                                        {
                                          "displayName": "Column B",
                                          "selected": true,
                                          "sortable": false
                                        },
                                        {
                                          "displayName": "Column C",
                                          "selected": true,
                                          "sortable": true
                                        }
                             ];

基于此，我在标记中的表中呈现列。

<table>
    <thead>
          <tr>
                        <th ng-repeat="column in columns" ng-if="column.selected && column.sortable" ng-click="toggleSort(column.name)" class="sortable"
                            ng-class="{sorting_desc:sortBy===column.name &amp;&amp; sortOrder==='DESC',
                                       sorting_asc:sortBy===column.name &amp;&amp; sortOrder==='ASC'
                                      }">
                            {{column.displayName}}
                        </th>
                        <th ng-repeat="column in columnSettings" ng-if="column.selected && !column.sortable">
                            {{column.displayName}}
                        </th>
                    </tr>
    </thead>
  </table>

所以，基本上，我想做

  if column is selectable 
       check if sortable 
               apply ng-class and ng-click on td element.
             else
               render normal td element

上面的代码有效，但它首先呈现所有可排序的列，然后呈现不可排序的列。

例如：它渲染 A栏C栏B栏

但我希望它呈现 A栏B栏C列

非常感谢任何帮助。感谢。

Answer 1

您可以在第一个th上使用ng-repeat-start而在第二个th上使用ng-repeat-end，而不是将每个<table> <thead> <tr> <th ng-repeat-start="column in columns" ng-if="column.selected && column.sortable" ng-click="toggleSort(column.name)" class="sortable" ng-class="{sorting_desc:sortBy===column.name && sortOrder==='DESC', sorting_asc:sortBy===column.name && sortOrder==='ASC' }"> {{column.displayName}} </th> <th ng-repeat-end ng-if="column.selected && !column.sortable"> {{column.displayName}} </th> </tr> </thead> </table>分成一个单独的重复块。重复序列。

{{1}}

Answer 2

使用额外的中间元素更干净

    <table>
        <thead>
            <tr>
                <th ng-repeat="column in columns">

                    <div class="sortable"
                    ng-if="column.selected && column.sortable"                    
                    ng-click="toggleSort(column.displayName)">
                        {{column.displayName}}
                    </div>

                    <div ng-if="column.selected && !column.sortable">
                        {{column.displayName}}
                    </div>

                </th>
            </tr>
        </thead>
    </table>

Answer 3

是的，我终于有了解决方案，就是这样。

<th ng-repeat="column in columns" ng-if="column.selected"
                                 ng-click="column.sortable && toggleSort(column.name)"
                                    ng-class="{sorting_desc:sortField===column.name &amp;&amp; sortOrder==='DESC' &amp;&amp; column.sortable,
                                    sorting_asc:sortField===column.name &amp;&amp; sortOrder==='ASC' &amp;&amp; column.sortable,
                                    sortable: column.sortable}"
                                    >
                                {{column.displayName}}
                        </th>

使用ng-if对元素进行angularjs ng-repeat

3 个答案: