AngularJS

Question

我在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 here）

有没有什么方法可以用当前的数据形式来完成，或者它是一种更好的结构化数据的方法来达到预期的结果吗？提前致谢！

Answer 1

正如 the documentation 所说，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>

看看你的updated plunkr。

Answer 2

我会使用这样的数组：

colors = [{color: 'red', value: 1}, {color: 'blue', value: 2}]

那你就可以使用

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

Plunkr

Answer 3

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

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

Answer 4

不同的方法 -

string from JsonConvert.SerializeObject(DataTable), so basically 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>

AngularJS - ng-repeat by key, value 对时的 orderBy 值

AngularJS - orderBy value when ng-repeat by key, value pair

lodash