Question

在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和过滤器。

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

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

Answer 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;
};

Answer 2

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

示例：

<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/

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

2 个答案: