排序 AngularJS smart-table 绑定到 ID 列表
Sorting AngularJS smart-table bound to list of IDs
我有一个 AngularJS 控制器,它可以检索多个 ID 集合(排序和过滤方式不同)和一个将 ID 映射到实际数据的字典。
我正在尝试使用 smart-table 来显示数据并允许用户对其进行排序和过滤。我遇到了如何使用 smart-table 处理从键到实际数据的间接级别的问题。
在 st-sort 的示例代码中找到的解决方案是使用 getter 函数,但它似乎过于冗长,因为我需要为每个字段定义一个 getter 函数个别地。另外,当数组包含标量而不是具有属性的对象时,我没有得到应该放在 st-sort 中的内容。
此外,我不确定 smart-table 的其他部分是否会因为过滤等间接问题而出现问题。
如有任何关于最佳处理方法的建议,我将不胜感激。
控制器
angular.module('myApp', ['smart-table'])
.controller('mainCtrl', ['$scope',
function ($scope) {
$scope.ordered_ids = [ 'id-1', 'id-2', 'id-3' ];
$scope.data = {
'id-1': {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
'id-2': {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
'id-3': {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
};
$scope.getter=function (value) {
return $scope.data[value];
}
}
]);
HTML
<table st-table="ordered_ids" class="table table-striped">
<thead>
<tr>
<th st-sort="">ID</th>
<th st-sort="getter">First name</th>
<th>Last name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="id in ordered_ids" ng-init="e = data[id]">
<td>{{id}}</td>
<td>{{e.firstName}}</td>
<td>{{e.lastName}}</td>
<td>{{e.email}}</td>
</tr>
</tbody>
</table>
我认为您应该先转换数据,使其更易于使用
//assuming $scope.data is the object above
$scope.data = Object.keys($scope.data).map(function(key){
return angular.extend({id:key},$scope.data[key]);
});
//no you'll have an array [{id:'id-1',fistname:'laurent',lastname:'renard', ...}, ... ]
那一切就容易多了
我有一个 AngularJS 控制器,它可以检索多个 ID 集合(排序和过滤方式不同)和一个将 ID 映射到实际数据的字典。
我正在尝试使用 smart-table 来显示数据并允许用户对其进行排序和过滤。我遇到了如何使用 smart-table 处理从键到实际数据的间接级别的问题。
在 st-sort 的示例代码中找到的解决方案是使用 getter 函数,但它似乎过于冗长,因为我需要为每个字段定义一个 getter 函数个别地。另外,当数组包含标量而不是具有属性的对象时,我没有得到应该放在 st-sort 中的内容。
此外,我不确定 smart-table 的其他部分是否会因为过滤等间接问题而出现问题。
如有任何关于最佳处理方法的建议,我将不胜感激。
控制器
angular.module('myApp', ['smart-table'])
.controller('mainCtrl', ['$scope',
function ($scope) {
$scope.ordered_ids = [ 'id-1', 'id-2', 'id-3' ];
$scope.data = {
'id-1': {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
'id-2': {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
'id-3': {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
};
$scope.getter=function (value) {
return $scope.data[value];
}
}
]);
HTML
<table st-table="ordered_ids" class="table table-striped">
<thead>
<tr>
<th st-sort="">ID</th>
<th st-sort="getter">First name</th>
<th>Last name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="id in ordered_ids" ng-init="e = data[id]">
<td>{{id}}</td>
<td>{{e.firstName}}</td>
<td>{{e.lastName}}</td>
<td>{{e.email}}</td>
</tr>
</tbody>
</table>
我认为您应该先转换数据,使其更易于使用
//assuming $scope.data is the object above
$scope.data = Object.keys($scope.data).map(function(key){
return angular.extend({id:key},$scope.data[key]);
});
//no you'll have an array [{id:'id-1',fistname:'laurent',lastname:'renard', ...}, ... ]
那一切就容易多了