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`過濾器

回答

相關問題