如何在AngularJS ng-repeat循环中将长JSON路径缩短为变量？

Question

In an ng-repeat loop I'm using multiple times a longer object properties path, where mostly only the last segment is different:

<div id="projects" ng-app="portfolio">
    <div id="projectsList" ng-controller="ProjectsListController as projectsList">
        <div class="projectItem" ng-repeat="projectItem in projectsList.projectsListData._embedded.projects">
            <div class="project-image">
                <img
                    ng-src="{{projectItem._embedded.images[0].src}}"
                    title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}"
                    alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}"
                />
            </div>
        </div>
    </div>
</div>

I would like to use a variable instead of projectItem._embedded.images[0] (well, in this case the path length might be acceptable, but sometimes it becomes ver long). How use a variable ( var myVar = projectItem._embedded.images[0] ) instead of the object properties path?

---

EDIT

Just to explain, what I mean -- in PHP I would implement it like this:

<div id="projects">
    <div id="projectsList">
    <?php foreach ($projectsList['projectsListData']['_embedded']['projects'] as $projectItem) :?>
        <!-- This intermediate step is missing in the AngularJS loop. -->
        <?php $image = $projectItem['_embedded']['images'][0]; ?>
        <div class="projectItem">
            <div class="project-image">
                <img
                    src="<?php echo $image['src']; ?>"
                    title="<?php echo $projectItem['title']; ?> - <?php echo $image['title']; ?>"
                    alt="<?php echo $projectItem['title']; ?> - <?php echo $image['title']; ?>"
                />
            </div>
        </div>
    <?php endforeach; ?>
    </div>
</div>

Answer 1

Save projectsList.projectsListData._embedded.project in the controller to project as in the example below, then call projectsList.project in the view:

angular
  .module('app', [])
  .controller('ProjectsListController', ProjectsListController)

function ProjectsListController() {
  var vm = this;

  vm.project = projectsList.projectsListData._embedded.project;
}

Answer 2

Use ngInit to alias a property of your item in the ngRepeat.

 <div id="projects" ng-app="portfolio">
        <div id="projectsList" ng-controller="ProjectsListController as projectsList">
            <div class="projectItem" 
                 ng-repeat="projectItem in projectsList.projectsListData._embedded.project" 
                 ng-init="image=projectItem._embedded.images[0]">
                <div class="project-image">
                    <img 
                       ng-src="{{image.src}}"
                       title="{{projectItem.title}} - {{image.title}}"
                       alt="{{projectItem.title}} - {{image.title}}"/>
                </div>
            </div>
        </div>
    </div>

Something like this should work.

Here's a fiddle with a little sample I put together: http://jsfiddle.net/7f83hLd9/6/