为每个弹出框添加不同的文本

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

将您的数据添加到每个图像项。 撒谎：

$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 -->

Answer 2

我想我明白了。

为每张照片添加文本字段。 您的 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>

这是你的答案