Добавление разного текста в каждое всплывающее окно

Question

Я относительно новичок во всем этом и хочу интегрировать этот код в свой личный сайт. Я настроил все, за исключением того, что я хочу, чтобы текст был разным для каждого всплывающего изображения, и он должен быть одинаковым на каждом. Любые предложения будут высоко оценены.

https://codepen.io/ste-vg/pen/NALWrj

<div class="container" ng-class="{'no-scroll': selected.length}" ng-app="app" ng-controller="mainCtrl">
    <div class="page">
        <div class="grid">
            <div class="grid-item" ng-repeat="item in boxes">
                <box class="box" item="item" on-select="selectBox" ng-class="{'selected': selected[0].item.name == item.name}"></box>
            </div>
        </div>
    </div>
    <div class="fullscreen-background top-up" ng-show="selected.length" ng-style="{'background-image': 'url(' + selected[0].item.image + ')'}"></div>
    <div class="scroller" ng-show="selected.length">
        <a class="close-button" ng-click="clearSelection()">
            <i class="material-icons">close</i>
        </a>
        <h1>{{selected[0].item.name}}</h1>
        <div big-box ng-repeat="item in selected" class="box on-top" position="item.position" selected="item.item">
            <img ng-src="{{item.item.image}}" alt="" />
            <div class="content">
                <h2>Lorem ipsum dolor</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime laborum perferendis, ullam minus. Illo ad aliquid ab magni, enim nesciunt at consequuntur dolores explicabo nisi. Dolor, reiciendis suscipit alias nemo.</p>
            </div>
        </div>
    </div>
</div>

Спасибо

Answer 1

Я думаю, что понял.

Добавьте текстовое поле для каждой вашей фотографии. Ваш код Javascript (в $ scope.boxes) должен измениться, как показано ниже:

$scope.boxes = [
        {
            name: "Friends",
            image: "https://source.unsplash.com/uAgLGG1WBd4/900x900",
            text: "this is first photo"
        },
        {
            name: "Free",
            image: "https://source.unsplash.com/Cp-LUHPRpWM/900x900",
            text: "this is second photo"
        },
        {
            name: "Explore",
            image: "https://source.unsplash.com/7BjmDICVloE/900x900",
            text: "this is third photo"
        },
        {
            name: "Vast",
            image: "https://source.unsplash.com/WLUHO9A_xik/900x900",
            text: "this is fourth photo"
        },
        {
            name: "Playful",
            image: "https://source.unsplash.com/b2-fBVrfx0o/900x900",
            text: "this is fifth photo"
        },
        {
            name: "Grand",
            image: "https://source.unsplash.com/Ixp4YhCKZkI/900x900",
            text: "this is sixth photo"
        },
        {
            name: "Mist",
            image: "https://source.unsplash.com/8BmNurlVR6M/900x900",
            text: "this is seventh photo"
        },
        {
            name: "Sea",
            image: "https://source.unsplash.com/6YqpFWWQsno/900x900",
            text: "this is eighth photo"
        },
        {
            name: "Reach",
            image: "https://source.unsplash.com/zFnk_bTLApo/900x900",
            text: "this is nineth photo"
        },
        {
            name: "Awe",
            image: "https://source.unsplash.com/j4PaE7E2_Ws/900x900",
            text: "this is tenth photo"
        },
        {
            name: "Surf",
            image: "https://source.unsplash.com/uohGiEVhWiQ/900x900",
            text: "this is eleventh photo"
        },
        {
            name: "Thrill",
            image: "https://source.unsplash.com/ssrbaKvxaos/900x900",
            text: "this is twelfth photo"
        }
    ];

Ваш код HTML (в div class = "content") должен измениться так же, как ниже

     <div class="content">
        <h2>Lorem ipsum dolor</h2>      
        <p>{{selected[0].item.text}}</p>   //this is important                                                                                                   
     </div>

вот ваш ответ

Answer 2

добавить свои данные для каждого элемента изображения. l ie это:

$scope.boxes = [{
        name: 'Friends',
        image: 'https://source.unsplash.com/uAgLGG1WBd4/900x900',
        title:"new title", // title for every image
        desc:"this is desc from hank" // desc for every image
    }
    ///... other items

и затем в шаблоне:

        <div class="content">
                <h2>{{item.item.title? item.item.title : "DEFAULT TITLE"}}</h2>
<p>{{item.item.desc? item.item.desc: "DEFAULT DESC"</p>
<!-- other code -->