将数据分类并显示类别标题答案

【问题标题】：Sorting data into categories and showing category headlines将数据分类并显示类别标题
【发布时间】：2013-05-14 00:15:20
【问题描述】：

在AngularJS 中，对于给定的动物数据集，生成个性视图 和尺寸视图 的最佳方法是什么？

个性观

Animals by personality:
Cute
    Cat
    Dog
Scary
    Snake
    Shark

尺寸视图

Animals by size:
Small
    Cat
Medium
    Dog
    Snake
Large
    Shark

数据集

$scope.animals = [
    { 
        name: 'Cat',
        pers: 'cute',
        size: 'small'
    },
    { 
        name: 'Dog',
        pers: 'cute',
        size: 'medium'
    },
    { 
        name: 'Snake',
        pers: 'scary',
        size: 'medium'
    },
    { 
        name: 'Shark',
        pers: 'scary',
        size: 'large'
    }
];

我目前在做什么

对于个性视图，我目前使用如下代码：

<h1>Animals by personality</h1>

<h2>Cute</h2>
<li ng-repeat="animal in animals | filter: 'cute'">
    {{ animal.name }}
</li>

<h2>Scary</h2>
<li ng-repeat="animal in animals | filter: 'scary'">
    {{ animal.name }}
</li>

然后对于尺寸视图，我复制上面的代码并更改 h1、h2s 和过滤器。

这里的重点是：按类别对数据集进行排序，但显示每个类别的类别标题。

所以我的问题是，这很像一个已知问题？如何最好地解决它？

【问题讨论】：

标签： sorting angularjs filter angularjs-ng-repeat

【解决方案1】：

filter 过滤器与这里无关。您要做的不是过滤，因为您想显示所有数据，而是订购，orderBy 过滤器就是这样做的方法。

但是，没有“内置”方式也可以显示标题。您可以制作类似this Fiddle 的东西，但显然最好是创建自己的指令。

<h1>Animals by personality</h1>

<li ng-repeat="animal in animals | orderBy: pers">
    <h2 ng-show="isNewPersonality(animal)">{{ animal.pers }}</h2>
    {{ animal.name }}
</li>

控制器：

$scope.lastPersonality = null;
$scope.isNewPersonality = function (animal)
{
    if ($scope.lastPersonality != animal.pers)
    {
        $scope.lastPersonality = animal.pers;
        return true;
    }

    return false;
};

【讨论】：

谢谢。现在如果一个动物有两种性格，比如说一只猫既是cute又是scary？您的代码所做的是创建一个新组cute and scary 并将猫放在那里。但是，我希望这只猫同时出现在cute 和scary 组中，而不是为它创建一个全新的组。 jsfiddle.net/5DMpX/3
嗯，这要复杂得多。当然，在我自己的指令中，我要做的是从初始数据集创建一个二维数组。第一个维度记住标题（可爱、可怕……），第二个维度记住数据。例如，在链接函数中执行此操作非常简单。现在，对于显示，我将简单地使用两个嵌套的 ng-repeat :)。

【解决方案2】：

使用两个嵌套的 ng-repeats。您可以单独获取类别，也可以使用 underscorejs 从动物数组中提取它们。

例子：

<div ng-repeat="p in personalities" style="margin-bottom: 2em;">
    <h2>{{p}}</h2>
    <ul>
        <li ng-repeat="a in animals" ng-show="a.pers == p">{{a.name}}</li>
    </ul>
</div>

在控制器中：

$scope.animals = [...]
$scope.personalities = _.uniq(_.pluck($scope.animals, 'pers'));

一个工作小提琴：http://jsfiddle.net/U3pVM/3811/

【讨论】：