I've posted this to try and save anyone a days work!

Scenario:

I was using nested content within a document type to create a number of galleries with a set amount of images. The content listview was far too basic to simply display the name of the gallery so I needed a bespoke listview.

I'm not going to go into detail about setting everything up in angular this can all be found here - https://umbraco.tv/videos/umbraco-v7/developer/extending/custom-listview/

Problem:

Looping the nested content json doesn't actually require any formatting in the controller.js you simply draw out each field inside the html (e.g. item.myNestedContentJsonProperty.text, item.myNestedContentJsonProperty.description, etc.) ... BUT... the image is in UID form and not URL... How do we get the URL from this UID???

Solution:

Nothing seemed to work in the controller.js. Using mediaHelper and mediaResource also threw up blanks. The solution was to replace the 'image' json field with the entityResource object inside the controller then draw out the URL from this json inside the HTML!

Some code...

    angular.module("umbraco").controller("My.ListView.GalleryLayoutController",
        function ($scope, entityResource) {

            "use strict";

            var vm = this;

            function activate() {
                angular.forEach($scope.items, function (item) {
                    getImages(item);
                });
            }

            function getImages(item) {
                // Get the json from nested content
                var arr = item.galleryItems;
                arr.forEach(function (img) {
                    // Replace each image UID with the object
                    img.image = setImage(img.image);
                })

            }

            function setImage(img) {
               // Get the image object
                var obj = entityResource.getById(img, 'Media');
                return obj;    
            }

            activate();

        })

Now in the html you need to find the 'MediaPath' value...

<div ng-controller="My.ListView.GalleryLayoutController as vm"
     ng-if="items"
     class="my-gallery-layout__cards">

    <div class="my-gallery-layout__card"
         ng-repeat="item in items"
         ng-class="{'selected': item.selected}">

        <div class="my-gallery-layout__overlay">
            <div class="my-gallery-layout___name"
                 ng-repeat="itm in item.galleryItems">
                 <!-- RIGHT HERE :-) -->
                <img src="{{ itm.image.$$state.value.metaData.MediaPath }}"/>
            </div>
        </div>
    </div>
</div>

Simple enough, but took me a lot of searching and failing to work out. Hopefully saves someone some time somewhere down the line!

Cheers,

Allan