0

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

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

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

4

2 回答 2

1

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

但是，没有“内置”方式也可以显示标题。您可以制作类似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;
};
于 2013-05-19T08:52:52.477 回答
0

使用两个嵌套的 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/

于 2014-03-24T13:07:20.157 回答