如何在AngularJS ng-repeat循環中將長JSON路徑縮短為變量？

Question

在ng-repeat循環中，我多次使用更長的對象屬性路徑，其中大部分僅最后一段是不同的：

<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>

我想使用變量而不是projectItem._embedded.images[0] （在這種情況下，路徑長度可以接受，但有時會變得很長）。 如何使用變量（ var myVar = projectItem._embedded.images[0] ）代替對象屬性路徑？

---

編輯

只是為了解釋一下，我的意思是-在PHP中，我將這樣實現：

<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

如下例所示，將控制器中的projectsList.projectsListData._embedded.project保存為項目，然后在視圖中調用projectsList.project ：

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

function ProjectsListController() {
  var vm = this;

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

Answer 2

使用ngInit在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>

這樣的事情應該起作用。

這是一個小提琴，上面放了一些示例： http : //jsfiddle.net/7f83hLd9/6/