Angularjs raggruppa i dati da un campo nei record

Question

C'è un gruppo simile a qualcosa in modo angolare che può convertire questo tipo di dati JSON raggruppati in group_header.

elenco esterno per ordinare i dati per gruppi e quindi gli elementi di dati dell'elenco interno di quel gruppo, non potrei dare un senso a questo se questi dati possono essere raggruppati? opzione di filtro

var data = [ 
 
    { 
 
     "id":23, 
 
     "name":"Fun Run (Pre-Registration Required)", 
 
     "date":"Wednesday Nov 12", 
 
     "group_header":"Sessions from 7:00 am to 1:45 pm" 
 
    }, 
 
    { 
 
     "id":24, 
 
     "name":"Breakfast", 
 
     "date":"Wednesday Nov 12", 
 
     "group_header":"Sessions from 7:00 am to 1:45 pm" 
 
    }, 
 
    { 
 
     "id":25, 
 
     "name":"Opening Address", 
 
     "date":"Wednesday Nov 12", 
 
     "group_header":"Sessions from 7:00 am to 1:45 pm" 
 
    }, 
 
    { 
 
     "id":25, 
 
     "name":"abc", 
 
     "date":"Wednesday Nov 12", 
 
     "group_header":"Sessions from 1:00 pm to 9:00 pm" 
 
    }, 
 
    { 
 
     "id":26, 
 
     "name":"xyz", 
 
     "date":"Wednesday Nov 12", 
 
     "group_header":"Sessions from 1:00 pm to 9:00 pm" 
 
    }, 
 
    { 
 
     "id":26, 
 
     "name":"xyz", 
 
     "date":"Wednesday Nov 12", 
 
     "group_header":"Sessions from 8:45 am to 2:00 pm" //notice a different header 
 
    }, 
 
    { 
 
     "id":26, 
 
     "name":"xyz", 
 
     "date":"Wednesday Nov 12", 
 
     "group_header":"Sessions from 1:30 pm to 11:00 pm" //another different header 
 
    } 
 
]

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<ul> 
 
    <li>Sessions from 7:00 am to 1:45 pm 
 
     <ul> 
 
      <li>Fun Run (Pre-Registration Required)</li> 
 
      <li>Breakfast</li> 
 
      <li>Opening Address</li> 
 
     </ul> 
 
    </li> 
 
    <li>Sessions from 1:00 pm to 9:00 pm 
 
     <ul> 
 
      <li>abc</li> 
 
      <li>xyz Address</li> 
 
     </ul> 
 
    </li> 
 
    <li>another custom header (no pattern to it) - sessions from 10 am to 5 pm 
 
     <ul> 
 
      <li>abc</li> 
 
      <li>xyz Address</li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 1

personalizzato è scritto ormai alla fine, se si voleva creare il filtro più complesso.

Prima EDIT: Utilizzando Angular-Filter da angular-filter GitHub

Working JSBIN as your Request sto usando angolare-filtro, gruppo-by opzione, che mi permette di fare così. si potrebbe seguire html strega è piuttosto semplice capire

HTML:

<ul ng-repeat="(key, value) in data | groupBy: 'group_header'"> //First extracting key value, from ng-repeat and grouping it by group_header (External 3rd party filter by angular-filter). 

    Group name: {{ key }} 
    <li ng-repeat="item in value"> // Then extra ng-repeat to iterate each of the objects and presenting the name . 
    Activity : {{ item.name }} 
    </li> 
</ul> 

JS: Tutto quello che dovete fare:

Inject angolare-filtro per il codice in questo modo:

angular.module('app',['angular.filter']).. 

---

Quindi ho scritto un filtro per il tuo scopo che dovrebbe essere fatto su misura, ma è anche, riutilizzabile e facile da testare.

prima di saltare in COPIA INCOLLA &:

E 'importante per voi capire il motivo per cui utilizzare i filtri, e come usarli bene.

Nella mia soluzione ho scritto un filtro che è possibile dichiarare un minHour e mostrerà solo le ore successive a quell'ora.

leggiamo il codice:

app.filter('minHour',function(){ // 1 - Explained below. 
    return function(items, minHour){ //2 - Explained below. 
    var filtered = []; 
    for(var i =0 ; i < items.length ; i ++){ 
     var hour = parseInt(items[i].start.slice(0,2)); //3 - Explained below. 
     if(hour === minHour || hour > minHour){ 
      filtered.push(items[i]); 
     } 
    } 
    return filtered; 
    } 
}) 

trovo la maggior parte del codice di cui sopra, piuttosto facile da leggere, ma sto scrivendo spiegazione sui bit difficault:

1) Questo è il modo angolare definisce un nuovo filtro.

2) Il filtro restituirà sempre una funzione con argomento, il primo argomento è SEMPRE le voci del ng-repeat, il secondo argomento è SEMPRE la stringa che verrà utilizzata quando si chiama il filtro. (questa è la cosa più importante qui).

3) Questo sta funzionando MA attenzione questa è una CATTIVA PRATICA Presumo anch'io molte cose nella funzione!

* Ho assunto che l'ora verrà scritta nelle prime due lettere della stringa.

* Ho presupposto che l'ora sarà sempre sulla proprietà "start" senza prima controllare l'attributo.

* Supponevo di poter confrontare questi valori.

Così lezioni apprese:

Prima di scrivere un filtro, assicurarsi che non si stanno facendo troppo numerose ipotesi.

Verificare sempre l'onestà dei dati prima!

Uso + Plunker:

<ul> 
    <li ng-repeat="items in data | minHour:09">{{items.start}}</li> 
</ul> 

Plunker

non ho scritto il filtro max ora, perché volevo fare pratica esso. È davvero facile se leggi la mia risposta.

Se hai altre domande sarei felice di aiutarti!

Answer 2

È possibile utilizzare il angolare filtro come questo:

Nella tua testa HTML:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"> </script>. 

Poi, nel tuo app angolare dichiarare l' 'angular.filter':

angular.module('project', ['ngRoute','angular.filter']).config(fu.... 

Quindi utilizzare come:

<tr ng-repeat="(k,v) in data| groupBy: 'group_header'"> 
    <td>{{k}}</td> 
    <td> 
     <ul> 
      <li ng-repeat="item in v"> 
       {{item.name}} 
      </li> 
     </ul> 
    </td> 
</tr>