Ng-repeat angular con vistas de encabezado

Muy nuevo en angular aquí tan desnudo conmigo. Conozco el uso básico de ng-repeat y puedo generar una lista fácilmente.

 
  • {{presentation.title}}

Tengo una matriz que se devuelve desde PHP:

 presentations = Array ( [0] => stdClass Object ( [collection] => Collection A [title] => Title 1a ) [1] => stdClass Object ( [collection] => Collection A [title] => Title 2a ) [2] => stdClass Object ( [collection] => Collection B [title] => Title 1b ) [3] => stdClass Object ( [collection] => Collection B [title] => Title 2b ) [4] => stdClass Object ( [collection] => Collection C [title] => Title 1c ) [5] => stdClass Object ( [collection] => Collection C [title] => Title 2c ) [6] => stdClass Object ( [collection] => Collection C [title] => Title 3c ) ) 

Notará que cada objeto tiene una collection .

Necesito básicamente crear una vista de encabezado por colección. Necesito que se muestre de la siguiente manera:

 COLLECTION A - Title 1a - Title 2a COLLECTION B - Title 1b - Title 2b COLLECTION C - Title 1c - Title 2c - Title 3c 

Solo se podría hacer clic en los títulos. ¿Es esto posible con solo ng-repeat ? Sé que puedo ordenar cada colección en matrices separadas en PHP. ¿Debo hacer eso primero? Me gustaría utilizar ng-repeat si es posible, simplemente no estoy seguro de cómo abordar esto.

Planeo mostrar esta lista en una lista de nav-list como se define usando Twitter bootstrap

nav-list

Probablemente haya otra manera de lograr esto con directivas pero

http://beta.plnkr.co/KjXZInfrDK9eRid2Rpqf

Define una función que va a llamar para mostrar u ocultar el encabezado:

 // just a hard coded list of objects, we will output a header when the title changes $scope.presentations = [{"title":"a", "other":"something else"},{"title":"a", "other":"something else"},{"title":"b", "other":"something else"},{"title":"b", "other":"something else"}, {"title":"b", "other":"something else"}] $scope.currentTitle = '-1'; $scope.CreateHeader = function(title) { showHeader = (title!=$scope.currentTitle); $scope.currentTitle = title; return showHeader; } 

Tu html se vería así:

 
  • {{presentation.title}} is the header
    {{presentation.other}} is an attribute on the collection item