Ananth Ananth - 5 months ago 53
Javascript Question

Smart table sorting not working

I am working on a table that just has a single column. Values are populated from a string array. But I can not get the Sorting to work.

What is it that I am doing wrong here ?

Steps tried :

1) Verified the st-safe-src attribute. Searching is working fine. So I assume st-safe-src attribute is set correctly.

2) Tried

<th st-sort-default="true">


3) Tried
<th st-sort="user">


4) Tried changing

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

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


Code for Designer

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


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

Try something like:

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

View

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

Worst case could map your array to an array of objects and then use property name created in each object