Question

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

#header-n

目前我已将其编码为两个通过服务进行交互的控制器，但它肯定不是一种角色惯用的方式。

如果每个#contents-n-*包含其中的所有var groups = [ { text: 'group 1', items: [1, 2, 3] }, ... ]; var items = [ { id: 1, text: 'item 1' }, ... ];，那么很容易解决，因此范围规则足以实现所需的行为。问题是不可能这样做。

另一种方法是通过列表过滤在Angular todomvc示例中执行此操作。所有组中所有项目的组合数量足以放弃此选项。

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

UPD。数据看起来像这样：

myActivity = (AppCompatActivity)context;
                myActivity.getFragmentManager().findFragmentByTag("MULTIPLE_CHOICE_POLL_FRAGMENT");

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/

（这假设“群组”可以重复使用）

如何在Angular.js中实现组

1 个答案: