javascript - 智能表格排序不起作用

Question

我正在处理只有一列的表格。值从字符串数组填充。但是我无法让排序工作。

我这里做错了什么？

尝试的步骤:

1) 验证了 st-safe-src 属性。搜索工作正常。所以我假设 st-safe-src 属性设置正确。

2) 尝试过 <th st-sort-default="true">

3) 尝试过 <th st-sort="user">

4) 尝试改变

$scope.Users = {};
$scope.RawCollection = {};
to  

$scope.Users = [];
$scope.RawCollection = [];

设计器代码

<div ng-app="myApp">
    <div ng-controller="myController">
        <br />
        <br />
        <h4 style="padding-left: 24px; font-size: 15px">Select Role</h4>
        <select style="margin-left:24px" ng-change="HandleRoleChange(SelectedRole)" ng-model="SelectedRole" ng-options="x for x in Roles"></select>

        <br />
        <br />
        <input class="defaultTextBox" style="margin-left:24px ; height:25px ; padding-top : 1px ; font-family:Arial, Helvetica, sans-serif" type="text" ng-model="NewUser">  <input class="btn btn-info" type="button" value="Add User" ng-click="AddNewUser()" />
        <br />
        <table st-table="Users" st-safe-src="RawCollection" class="table table-striped" style="width:200px">
            <thead>
                <tr>
                    <th st-sort="user">
                        User
                    </th>
                </tr>
                <tr style="height:30px">
                        <th><input style="height:25px" st-search="" class="form-control" placeholder="Search Name ...... " type="text" /></th>
                    </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in Users track by $index">                
                    <td>{{user}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Controller 代码

<script type="text/javascript">

        var app = angular.module("myApp", ['smart-table']);
        app.controller("myController", VM);

        function VM($scope, $q, $http) {

            $scope.Roles = {};
            $scope.SelectedRole = "";
            $scope.Users = [];
            $scope.NewUser = "";
            $scope.RawCollection = [];

            var defer_Roles = $q.defer();
            var promise_Roles = defer_Roles.promise;
            promise_Roles.then(receivedRoles, '', '');

            var defer_Users = $q.defer();
            var promise_Users = defer_Users.promise;
            promise_Users.then('', '', receivedUsers);

            function getAllRoles() {

                $http.get("http://localhost/SBUXTerminalMonitorWebAPI/api/UserData?roleName=").success(function myfunction(roles) {

                    defer_Roles.resolve(roles);
                });
            }
            function receivedRoles(roles) {
                $scope.Roles = roles;
                $scope.SelectedRole = roles[0];
                getUsersForRole(roles[0]);
            }

            getAllRoles();

            $scope.HandleRoleChange = function (selectedRole) {
                getUsersForRole(selectedRole);
            }

            function getUsersForRole(roleName) {
                $http.get("http://localhost/SBUXTerminalMonitorWebAPI/api/UserData?roleName=" + roleName).success(function myfunction(users) {
                    defer_Users.notify(users);
                });
            }
            function receivedUsers(users) {
                $scope.Users = users;
                $scope.RawCollection = $scope.Users;
            }

            $scope.AddNewUser = function () {
                $http.post("http://localhost/SBUXTerminalMonitorWebAPI/api/UserData?newUser=" + $scope.NewUser, $scope.SelectedRole).success(function myfunction() {
                    getUsersForRole($scope.SelectedRole);
                    $scope.NewUser = "";
                });
            }
        }

    </script>

Answer 1

尝试这样的事情:

$scope.getters={
    colsort: function (value) {            
        return value;
    }
}

查看

<th st-sort="getters.colsort">

最坏的情况可能是将您的数组映射到对象数组，然后使用在每个对象中创建的属性名称