使用 angularjs 向图像数组添加描述

Question

我需要为以下图像数组中的每个图像添加一个描述，这些图像可以在这个对象中找到：

[
  {
    "id": "Movie Poster Remixes",
    "name": "HULK Remix",
    "practices": ["Graphics", "Sketching", "Artwork", "Vector Manipulation"],
    "technology": ["Inkscape", "Photoshop"],
    "time": "3 Weeks",
    "description": "A series of poster remixes I have one over the past couple of years. I tend to spend any free time working on some graphical artwork which tends to be printed off & framed in my house.",
    "images": [
        "../assets/img/details/15/1.jpg",
        "../assets/img/details/15/2.jpg",
        "../assets/img/details/15/3.jpg",
        "../assets/img/details/15/4.jpg"
    ],
    "header": "../assets/img/paramount-logo.svg",
    "behance": "https://www.behance.net/gallery/26358303/Avengers-Hulk-Desktop-WallPaper-Design"
  }
]

我似乎无法完成这项工作。图像显示在视图中，但看不到如何添加描述。

任何帮助将不胜感激。 TIA。

这就是我当前访问控制器中的对象并将某些键值绑定到范围的方式。

$http.get('app/resources/v1/projects/' + $routeParams.id + '.json').success(function (details) {

        $scope.details = details;
        angular.forEach($scope.details, function (detail) {
            $scope.header = detail.header;
            $scope.intro = detail.id;
        });

这是视图中的 html，看看我是如何暴露它的

           <div ng-repeat="image in detail.images">
                <img class="img-responsive presentation" ng-src="{{ image.path }}" />
                <table class="like-table">
                    <tr>
                        <td>
                            <a ng-click="likeCount = likeCount + 1">
                                <img class="presentation like" ng-src="{{ like }}" />
                            </a>
                        </td>
                        <td>Like: </td>
                        <td>
                            <strong> {{ likeCount }}</strong>
                        </td>
                        <td>
                            <a ng-click="shareCount = shareCount + 1">
                                <img class="presentation like" ng-src="{{ share }}" />
                            </a>
                        </td>
                        <td>Share: </td>
                        <td>
                            <strong> {{ shareCount }}</strong>
                        </td>
                    </tr>
                </table>
            </div>

Answer 1

更新：当图像只是一个数组时，您无法访问图像路径。您如何设置 json 文件和/或如何执行 ng-repeat 可能是个问题。在您的代码中添加一些控制台日志，并确保变量 $scope.details 与您预期的一样。

注意： 我会考虑将任何遵循相同结构的数据（即具有相同键的数据）保存在一个 JSON 文件中。这使您的应用程序更高效，因为您在页面加载时发出单个 $http.get 请求并将响应分配给 $scope.details。您不必为具有类似结构的 json 文件发出单独的 $http.get 请求 - 为什么不从一开始就全部获取？

<div ng-repeat="image in detail.images">
   <img class="img-responsive presentation" ng-src="{{ image.path }}" />
      <table class="like-table">
         ...

如果您尝试为图像数组中的每个图像添加描述，我建议将数组 images 更改为 对象数组。所以你的数据对象看起来像这样（注意图像数组的变化）：

[
  {
    "id": "Movie Poster Remixes",
    "name": "HULK Remix",
    "practices": ["Graphics", "Sketching", "Artwork", "Vector Manipulation"],
    "technology": ["Inkscape", "Photoshop"],
    "time": "3 Weeks",
    "description": "A series of poster remixes I have one over the past couple of years. I tend to spend any free time working on some graphical artwork which tends to be printed off & framed in my house.",
    "images": [
        { 
          "url": "../assets/img/details/15/1.jpg",
          "desc": "Description 1"
        },
        { 
          "url": "../assets/img/details/15/2.jpg",
          "desc": "Description 2"
        },
        { 
          "url": "../assets/img/details/15/3.jpg",
          "desc": "Description 3"
        },
        { 
          "url": "../assets/img/details/15/4.jpg",
          "desc": "Description 4"
        }
    ],
    "header": "../assets/img/paramount-logo.svg",
    "behance": "https://www.behance.net/gallery/26358303/Avengers-Hulk-Desktop-WallPaper-Design"
  }
]

希望有帮助！