![](/img/trans.png)
[英]AngularJS: toArray orderBy not working with ng-repeat on key, value pair
[英]AngularJS - orderBy value when ng-repeat by key, value pair
我已經用 lodash 中的 countBy 函數計算了一組數據中每個項目的出現次數,結果是這樣的:
$scope.colors= {
"Orange": 3,
"Blue": 2,
"Pink": 1,
"Red": 1,
"Black": 2,
};
現在我想顯示數據並按其值排序。 我試過
<div ng-controller="myCtrl" ng-app="myApp">
<ul>
<li ng-repeat="(key,value) in colors | orderBy:value">
{{key}} ({{value}})
</li>
</ul>
</div>
但是 orderBy 過濾器似乎並沒有起作用(請參閱此處的 plunkr )
有什么辦法可以用當前的數據形式來做,還是有更好的方法來構造數據以達到預期的結果? 提前致謝!
正如文檔所說, orderBy 需要一個數組作為輸入,而不是一個對象。 一般來說,雖然它受支持,但我從未遇到過使用帶有 ng-repeat 的對象是個好主意的用例。
只需將您的對象轉換為數組:
$scope.colors = [];
angular.forEach(occurrences, function(value, key) {
$scope.colors.push({
color: key,
count: value
});
});
然后使用
<li ng-repeat="element in colors | orderBy:'count'">
{{ element.color }} ({{ element.count }})
</li>
查看您更新的 plunkr 。
經過多次嘗試,我找到了一種迭代對象並按鍵排序的方法。
<div ng-repeat="key1 in keys(obj1) | orderBy: key1">
我會改為使用這樣的數組:
colors = [{color: 'red', value: 1}, {color: 'blue', value: 2}]
然后你可以使用
ng-repeat="color in colors | orderBy:'value'"
不同的方法 - 對於
來自JsonConvert.SerializeObject(DataTable) 的字符串,所以基本上
List<Dictionary<string, string>>
示例是幾個解決方案的組合(抱歉沒有參考)
在 AngularJs 控制器中:
vm.propertyName = '\u0022Spaced Column Name\u0022';
vm.reverse = true;
vm.sortBy = function (propertyName) {
vm.reverse = (vm.propertyName === '\u0022' + propertyName +'\u0022') ? !vm.reverse : false;
vm.propertyName = '\u0022' + propertyName + '\u0022';
};
vm.Data = JSON.parse(retValue.Data);
for (var i = 0; i < vm.Data.length; i++) {
var obj = {};
angular.forEach(vm.Data[i], function (value, key) {
obj[key] = value;
});
vm.DataArr.push(obj);
}
通過ng-if="key != 'Id'"
我用 Guid 隱藏了 Id 列
然后在 html 中:
<table border="1">
<tr>
<td ng-repeat="(key, value) in vm.Data[0]" ng-if="key != 'Id'">
<button ng-click="vm.sortBy(key)">{{key}}</button>
<span ng-show="vm.propertyName == '\u0022'+key+'\u0022' && !vm.reverse" class="fa fa-arrow-up"></span>
<span ng-show="vm.propertyName == '\u0022'+key+'\u0022' && vm.reverse" class="fa fa-arrow-down"></span>
</td>
</tr>
<tr ng-repeat="row in vm.DataArr |orderBy:vm.propertyName:vm.reverse track by $index" ng-init="rowInd0 = $index">
<td ng-repeat="(key, value) in vm.Data[0]" ng-if="key != 'Id'">
<span>{{row[key]}}</span>
</td>
</tr>
</table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.