如何在Angular.js中实现组

Question

我有两个列表，一个列表的名称为“ groups”，另一个列表的名称为“ items”。 当选择另一个组时，它应该更改项目列表的内容。

<div class="headers">
    <div id="header-1">Header 1</div>
    <div id="header-2 selected">Header 2</div>
</div>
<div class="contents">
    <div id="contents-2-1">Сontents 2.1</div>
    <div id="contents-2-2">Сontents 2.2</div>
</div>

目前，我已经将其猴子编码为通过服务进行交互的两个控制器，但这当然不是Angular惯用的方式。

如果每个#header-n包含其中的所有#contents-n-* ，则很容易解决，因此作用域规则将足以实现所需的行为。 问题是不可能这样做。

另一种方法是像通过列表过滤的Angular todomvc示例中那样。 所有组中所有项目的合计数量足以丢弃此选项。

如何以惯用的方式实现这种组选择？

UPD。 数据看起来像这样：

var groups = [
    {
        text: 'group 1',
        items: [1, 2, 3]
    },
    ...
];
var items = [
    {
        id: 1,
        text: 'item 1'
    },
    ...
];

Answer 1

您应该能够完成这项工作-假设您为选定的组（对象）拥有某种$scope var

$scope.selectGroup = function(group) {
    $scope.selectedGroup = group; //lets say group 1
    $scope.groupItems = items.filter(function(item) {
        return $scope.selectedGroup.items.indexOf(item.id) > -1;
    });
}

和HTML：

<div class="headers">
    <div id="header-1" ng-class=" {'selected': selectedGroup.text == group.text }" ng-click="selectGroup(group)" ng-repeat="group in groups">{{group.text}}</div>
</div>
<div class="contents">
    <div id="contents-2-1" ng-repeat="item in groupItems">{{item.text}}</div>
</div>

演示： http : //jsfiddle.net/HB7LU/15275/

（这假定“组”可重复访问）