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

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

＆＃13;

[
  {
    "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"
  }
]

＆＃13;

希望有所帮助！

使用angularjs向图像阵列添加描述

1 个答案: