如何在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/