Question

我正在尝试在表上实现排序功能。

我可以使用json（无空格）对表头进行排序。但是，我无法使用带空格的JSON键对表头进行排序

如何解决这个问题？

脚本： $ scope.sortType ='年龄'; $ scope.sortReverse = false;

HTML：

    <table border="1" class="table table-striped">
                    <thead>
                        <tr>
                            <th>
                                <a href="#" ng-click="sortType = x[First Name]">First Name
                                <span ng-show="sortType == x[First Name] && !sortReverse" class="fa fa-caret-down"></span>
                                <span ng-show="sortType == x[First Name] && sortReverse" class="fa fa-caret-up"></span>
                                </a>
                            </th>

 <th>
                            <a href="#" ng-click="sortType = x[Last Name;sortReverse = !sortReverse">
                                Last Name
                                <span ng-show="sortType == x[Last Name]  && !sortReverse" class="fa fa-caret-down"></span>
                                <span ng-show="sortType == x[Last Name] && sortReverse" class="fa fa-caret-up"></span>
                            </a>
                        </th>


                            <th>
                                <a href="#" ng-click="sortType = 'Age';sortReverse = !sortReverse">
                                    Age
                                    <span ng-show="sortType == 'Age' && !sortReverse" class="fa fa-caret-down"></span>
                                    <span ng-show="sortType == 'Age' && sortReverse" class="fa fa-caret-up"></span>
                                </a>
                            </th>
                            <th>
                                <a href="#" ng-click="sortType = 'Address';sortReverse = !sortReverse">Address
                                    <span ng-show="sortType == 'Address' && !sortReverse" class="fa fa-caret-down"></span>
                                    <span ng-show="sortType == 'Address' && sortReverse" class="fa fa-caret-up"></span>
                                </a>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr ng-repeat="x in result | filter:searchText | orderBy:sortType:sortReverse">
                            <td>{{x['First Name']}}</td>
                            <td>{{x['Last Name']}}</td>

                            <td>{{x.Age}}</td>
                            <td>{{x.Address}}</td>

                        </tr>
                    </tbody>
                </table>

Answer 1

您的代码中存在语法错误，您应该在浏览器控制台中看到它。

示例：

<th>
    <a href="#" ng-click="sortType = x[First Name]">First Name
       <span ng-show="sortType == x[First Name] && !sortReverse" class="fa fa-caret-down"></span>
       <span ng-show="sortType == x[First Name] && sortReverse" class="fa fa-caret-up"></span>
    </a>
</th>

您好像应该使用字符串文字'First Name'而不是x[First Name]这是语法错误和未定义的变量。

尝试将上述内容更改为：

<th>
    <a href="#" ng-click="sortType = 'First Name'">First Name
       <span ng-show="sortType == 'First Name' && !sortReverse" class="fa fa-caret-down"></span>
       <span ng-show="sortType == 'First Name' && sortReverse" class="fa fa-caret-up"></span>
    </a>
</th>

这应该有助于您现在应该在浏览器控制台中看到的语法问题，并且可以完全解决问题。

使用带空格的JSON键对表进行排序

1 个答案: