AngularJS-按键重复时的orderBy值,值对

AngularJS-按键重复时的orderBy值,值对,angularjs,lodash,Angularjs,Lodash,我用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

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

  • {{key}}({{value}})
但是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>
  • {{element.color}}({{element.count}})

  • 请参阅您的。

    我将使用如下数组:

    colors = [{color: 'red', value: 1}, {color: 'blue', value: 2}]
    
    然后你可以用

    ng-repeat="color in colors | orderBy:'value'"
    

    经过多次尝试,我找到了一种迭代对象并按键排序的方法

    <div ng-repeat="key1 in keys(obj1) | orderBy: key1">
    

    不同的方法-用于

    JsonConvert.SerializeObject(DataTable)中的字符串,因此基本上
    List

    示例是几个解决方案的组合(抱歉没有参考)
    在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);
                        }
    

    对象没有顺序,无法直接排序完美无瑕。谢谢效果也不错。我将另一个标记为正确,因为它显示了转换为数组的方法。无论如何,谢谢你的洞察力!
    <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>