Angular - 显示嵌套集合，使用`group-by`过滤器

我在玩angular group-by filter - 我试图复制他们的例子，它还没有工作。我究竟做错了什么？Angular - 显示嵌套集合，使用`group-by`过滤器

这里的HTML：

<div ng-controller="AccordionDemoCtrl"> 
    <accordion close-others="oneAtATime"> 

     <accordion-group is-open="group.isOpen" ng-repeat="(key, value) in groups | groupBy: 'title'"> 
     <accordion-heading><i class="glyphicon-plus"></i> {{ key }} 
      <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': group.isOpen, 'glyphicon-chevron-right': !group.isOpen}"></i> 
     </accordion-heading> 
     {{group.content}} 
     <ul> 
     <li ng-repeat="group in value"> 
     list item: {{group.list}} 
     </li> 
    </ul> 

     </accordion-group> 

    </accordion> 
    </div>

这里的JS：

angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']); 
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) { 
    $scope.oneAtATime = true; 

    $scope.groups = [ 
    { 
     title: 'title 1', 
     content: 'content 1', 
     isOpen: true 
    }, 
    { 
     title: 'title 2', 
     content: 'Content 2' 
    }, 
    { 
     title: 'title 3', 
     content: 'Content 3' 
    }, 
    { 
     title: 'title 4', 
     content: 'content 4' 
    }, 
    { 
     title: 'title 5', 
     content: 'content 5' 
    }, 
    { 
     title: 'title 1', 
     list: 'item1' 
    }, 
    { 
     title: 'title 1', 
     list: 'item2' 
    }, 
    { 
     title: 'title 1', 
     list: 'item3' 
    }, 
    { 
     title: 'title 2', 
     list: 'item1' 
    }, 
    { 
     title: 'title 2', 
     list: 'item2' 
    }, 
    { 
     title: 'title 3', 
     list: 'item1' 
    }, 
    { 
     title: 'title 3', 
     list: 'item2' 
    },  
    { 
     title: 'title 4', 
     list: 'item1' 
    }, 
    { 
     title: 'title 5', 
     list: 'item1' 
    } 
    ]; 
});

也许我处理这个错误，也许是我groups在js文件是时髦的，有什么我试图做的是基本上有一个集合有一个title和一个content条目为每个集合，但多le list条目（基本上是多个要点）。但从他们的例子看来，我在做什么工作？

我宁愿在js文件做的是这样的：

$scope.groups = [ 
    { 
     title: 'title 1', 
     content: 'content 1', 
     item: 'bullet point 1', 
     isOpen: true 
    }, 
    { 
     title: 'title 2', 
     content: 'Content 2' 
     item: 'bullet point 1', 
     item: 'bullet point 2' 
    }, 
    { 
     title: 'title 3', 
     content: 'Content 3', 
     item: 'bullet point 1', 
     item: 'bullet point 2', 
     item: 'bullet point 3' 
    }, 
    { 
     title: 'title 4', 
     content: 'content 4', 
     item: 'bullet point 1' 
    }, 
    { 
     title: 'title 5', 
     content: 'content 5', 
     item: 'bullet point 1', 
     item: 'bullet point 2' 
    } 
    ];

来源

2015-07-03 Agent Zebra

看起来不像你在你的模块依赖关系列表有角的过滤器：

变化：

angular.module('app', ['ui.bootstrap','ngSanitize']);

到：

angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);

angular.module('app', ['ui.bootstrap', 'ngSanitize', 'angular.filter']); 
 
angular.module('app').controller('AccordionDemoCtrl', function($scope) { 
 
    $scope.oneAtATime = true; 
 
    $scope.groups = [{ 
 
    title: 'title 1', 
 
    content: 'content 1', 
 
    isOpen: true 
 
    }, { 
 
    title: 'title 2', 
 
    content: 'Content 2' 
 
    }, { 
 
    title: 'title 3', 
 
    content: 'Content 3' 
 
    }, { 
 
    title: 'title 4', 
 
    content: 'content 4' 
 
    }, { 
 
    title: 'title 5', 
 
    content: 'content 5' 
 
    }, { 
 
    title: 'title 1', 
 
    list: 'item1' 
 
    }, { 
 
    title: 'title 1', 
 
    list: 'item2' 
 
    }, { 
 
    title: 'title 1', 
 
    list: 'item3' 
 
    }, { 
 
    title: 'title 2', 
 
    list: 'item1' 
 
    }, { 
 
    title: 'title 2', 
 
    list: 'item2' 
 
    }, { 
 
    title: 'title 3', 
 
    list: 'item1' 
 
    }, { 
 
    title: 'title 3', 
 
    list: 'item2' 
 
    }, { 
 
    title: 'title 4', 
 
    list: 'item1' 
 
    }, { 
 
    title: 'title 5', 
 
    list: 'item1' 
 
    }]; 
 
});

h1 { 
 
    font-size: 10px; 
 
    padding-bottom: 50px; 
 
}

<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css"> 
 
    <link rel="stylesheet" href="style.css"> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <h1>Dynamic angular accordion with nested angular collection - Test</h1> 
 

 
    <div ng-controller="AccordionDemoCtrl"> 
 
    <accordion close-others="oneAtATime"> 
 

 
     <accordion-group is-open="group.isOpen" ng-repeat="(key, value) in groups | groupBy: 'title'"> 
 
     <accordion-heading><i class="glyphicon-plus"></i> {{ key }} 
 
      <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': group.isOpen, 'glyphicon-chevron-right': !group.isOpen}"></i> 
 
     </accordion-heading> 
 
     {{ group.content }} 
 
     <ul> 
 
      <li ng-repeat="group in value"> 
 
      list item: {{ group.list }} 
 
      </li> 
 
     </ul> 
 

 
     </accordion-group> 
 

 
    </accordion> 
 
    </div> 
 
</body>

来源

2015-07-03 21:57:51 DTing

感谢那些帮助了很多。现在它不会打开“页面加载”中的第一个，它不会显示“{{group.content}}”。 [这里是一个新的plunker]（http://plnkr.co/edit/AAdm72sPkGYsrPFDt5RQ?p=preview） –

如果你将'{{group.content}}'改为'{{group}}'，你会看到组只是在该范围内具有'isOpen'属性的对象。 '内容'是未定义的。 – DTing

好的，我明白了，有趣。我通过将

“前面来固定”{{group.content}}“。现在唯一的事情是它不会在'pageload'上打开第一个。 [这里是一个运动员]（http://plnkr.co/edit/AAdm72sPkGYsrPFDt5RQ?p=preview） –

Angular - 显示嵌套集合，使用`group-by`过滤器

回答

相关问题