智能 table 排序不起作用
Smart table sorting not working
我正在处理只有一列的 table。值从字符串数组填充。但是我无法让排序工作。
我这里做错了什么?
尝试的步骤:
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>
控制器代码
<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>
试试这样的东西:
$scope.getters={
colsort: function (value) {
return value;
}
}
查看
<th st-sort="getters.colsort">
最坏的情况可能是将您的数组映射到对象数组,然后使用在每个对象中创建的属性名称
我正在处理只有一列的 table。值从字符串数组填充。但是我无法让排序工作。
我这里做错了什么?
尝试的步骤:
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>
控制器代码
<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>
试试这样的东西:
$scope.getters={
colsort: function (value) {
return value;
}
}
查看
<th st-sort="getters.colsort">
最坏的情况可能是将您的数组映射到对象数组,然后使用在每个对象中创建的属性名称