Добавить описание к массиву изображений, используя angularjs

0

Мне нужно добавить описание к каждому изображению в следующем массиве изображений, который находится в этом объекте:

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

Кажется, я не могу получить эту работу. Изображения отображаются в представлении, но я не могу видеть, как добавить описание.

Любая помощь приветствуется. ТИА.

вот как я в настоящее время обращаюсь к объекту в моем контроллере и привязываю определенные значения ключа к области.

$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>
  • 0
    Было бы очень полезно, если бы вы показали нам соответствующий фрагмент HTML-кода представления, чтобы мы могли лучше понять вашу проблему и то, как вы хотите, чтобы описания отображались. Мне неясно, с какой привязкой данных (т.е. передачей данных к представлению) у вас возникли проблемы, поскольку вы упоминаете, что изображения действительно отображаются. Кроме того, вы используете Angular 1.x или Angular2?
  • 0
    Я добавил в ключевые компоненты. Я уверен, что в настоящее время это конструкция моего объекта json, а не html. Возможно, мне придется изменить некоторые из способов, которыми я привязываюсь - но пока не уверен.
Теги:
object
arrays
image

1 ответ

1

UPDATE: вы не можете получить доступ к путям изображений, как это было при обращении к массиву. Возможно, проблема связана с настройкой ваших json файлов и/или тем, как вы выполняете ng-repeat. Бросьте несколько консольных журналов в свой код и убедитесь, что переменная $ scope.details так же, как и следовало ожидать.

ПРИМЕЧАНИЕ. Я хотел бы рассмотреть возможность хранения любых данных, следующих за этой же структурой, то есть имеющих одни и те же ключи, в одном файле JSON. Это делает ваше приложение более эффективным в том, что вы делаете один запрос $ http.get при загрузке страницы и назначаете ответ на $ scope.details. Вам не нужно делать отдельный запрос $ http.get для json файлов, имеющих аналогичную структуру - почему бы не получить все это с самого начала?

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

Если вы пытаетесь добавить описание к каждому изображению в массиве изображений, я бы предложил изменить изображения массива на массив объектов. Таким образом, ваш объект данных будет выглядеть так (обратите внимание на изменение массива изображений):

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

Надеюсь, это поможет!

  • 0
    Привет Сонам, спасибо. Это было то, что я думал, что мне нужно было сделать. Я реконструировал объект и получаю эту синтаксическую ошибку: неожиданный токен p в JSON в позиции 495 - есть идеи, почему?
  • 0
    Здорово! Несколько вопросов: Можете ли вы поделиться большим количеством своего кода, чтобы я мог видеть, откуда эта ошибка? Это необработанный файл JSON, который вы читаете с помощью fs, или как вы пытаетесь получить доступ к данным? Используете ли вы JSON.parse или JSON.stringify?
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню