Angular iterate JSON and Filter / Group

Angular iterate JSON and Filter / Group - ANDREW POUGHER

by Andrew Pougher

HTML

<script src="http://fonts.googleapis.com/css?family=Raleway:400,100,300&#39; rel=&#39;stylesheet&#39; type=&#39;text/css"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.5/angular-filter.min.js"></script>
<section ng-app="app">
    <div ng-controller="MainController" class="container-fluid">
  
        <div class="panel"> <p class="panel-body"> {{projects.length}} In total then grouped into projects by title hence {{value.length}}</p></div>
    
 <div ng-repeat="(key, value) in projects | groupBy: 'title' " class="riggallery">
       <div class="projectitem col-lg-{{12/projects.length}} col-sm-{{12/projects.length}} col-xs-{{12}}">
<h1>{{ key }} {{value.length}}</h1>
           <code ng-repeat="d in value | unique:'description'"> {{d.description}}</code>
           <li ng-repeat="f in value | orderBy:'pOrd'">{{f.photos[0].fileName}}<small> ({{f.galleryfolder}})</small></li>
          
           

        </div>
       </div>
    </div>
</section>

CSS

body {
    font-family:'Raleway', sans-serif;
    font-weight:100
}

.projectitem{background:#ececec;}

JavaScript

var AndrewPoughersAPP = angular.module('app', ['angular.filter']);



    AndrewPoughersAPP.controller('MainController', function ($scope) {
        
  
        
    $scope.projects = [
    {
        "id": 1,
        "title": " Greenwich Street Penthouse",
        "galleryfolder": "greenwich",
        "description": "Duplex Penthouse built from raw space in Manhattan",
        "ord": 1,
        "isActive": 1,
        "photos": [
            {
                "fileName": "gholding.jpg",
                "pOrd": 1,
                "caption": "Photo Caption",
                "pOn": 1
            }
        ]
    },
    {
        "id": 2,
        "title": " Great Jones Loft",
        "galleryfolder": "greatjones",
        "description": "Great Jones Loft",
        "ord": 2,
        "isActive": 1,
        "photos": [
            {
                "fileName": "Jholding.jpg",
                "pOrd": 2,
                "caption": "Photo Caption",
                "pOn": 1
            }
        ]
    },
    {
        "id": 3,
        "title": " Greenwich Street Penthouse",
        "galleryfolder": "greenwich",
        "description": "Duplex Penthouse built from raw space in Manhattan",
        "ord": 1,
        "isActive": 1,
        "photos": [
            {
                "fileName": "gholding.jpg",
                "pOrd": 2,
                "caption": "Photo Caption",
                "pOn": 1
            }
        ]
    },
    {
        "id": 4,
        "title": " Greenwich Street Penthouse",
        "galleryfolder": "greenwich",
        "description": "Duplex Penthouse built from raw space in Manhattan",
        "ord": 1,
        "isActive": 1,
        "photos": [
            {
                "fileName": "gholding1.jpg",
                "pOrd": 3,
                "caption": "Photo Caption",
                "pOn": 1
            }
        ]
    }
];
        

         
  
});