Question

我是angularJs的新手。我正在尝试根据我用ng-repeat制作的显示在Popup上显示用户配置文件。试图用ng-repeat显示的画廊没有显示，我已经尝试使用其他方法，如orderby或| filter。它只显示我变量的最后一张图像。

有没有办法在缩略图显示时显示模态弹出数据？谢谢

这是我的代码

less.render("p{color: #ff66ff}")
    .then(function(output) {
        console.log(output.css)
    },
  function(error){});

这是My Html for Displayed Thumbnail，已经使用ng-repeat加载了成功的数据。

(function () {

    var app = angular.module('agent', []);

    app.controller('AgentController', function ($scope) {

        this.products = talents;
    });


    var talents = [
        {
            id: '001',
            name: 'Jasmina',
            images: [
                    '../assets/images/Jasmina3.jpg',
                    '../assets/images/Jasmina4.jpg',
                    '../assets/images/Jasmina7.jpg',

                ],
            skills: ['Usherette', 'escort'],
            indexing: ['usher', 'escort']

        },

        {
            id: '002',
            name: 'Bruna',
            images: [
                    '../assets/images/BrunaD17.jpg',
                    '../assets/images/BrunaD18.jpg',
                    '../assets/images/BrunaD10.jpg',

                ],
            skills: ['Usherette', 'escort'],
            indexing: ['usher', 'escort']

        },

        {
            id: '003',
            name: 'Anda',
            images: [
                    '../assets/images/Anda.jpg',
                    '../assets/images/Anda8.jpg',
                    '../assets/images/Anda11.jpg',

                ],
            skills: ['Usherette', 'escort', 'Modeling'],
            indexing: ['usher', 'escort', 'model']

        },

        {
            id: '004',
            name: 'Anne',
            images: [
                    '../assets/images/AnneD8.jpg',
                    '../assets/images/AnneD17.jpg',
                    '../assets/images/AnneD21.jpg',

                ],
            skills: ['Modeling'],
            indexing: ['model']

        }
];


})();

现在，我试图用更详细的信息打开模态，并使用ng-repeat在那里显示图库。这是HTML

<div ng-controller="AgentController as agent" class="talent-container">
            <div ng-repeat="product in agent.products" class="card boxed" ng-class=" {{product.indexing}}">
                <div class="actionlist">
                    <div id="id"><span>{{product.id}}</span></div>
                    <div class="addBtn">
                        <a href="#"><img src="assets/icons/plus.svg"></a>
                    </div>
                    <div class="loveBtn">
                        <a href="#"><img src="assets/icons/heart-in-a-circle.svg"></a>
                    </div>
                </div>
                <div class="media">
                    <!--<div class="overlay">
                    <button class="gallery moreBtn">STORY</button>
                </div>-->
                    <div><img id="slideShow" ng-src="{{product.images[0]}}"></div>
                    <div class="hide"><img id="slideShow" ng-src="{{product.images[1]}}"></div>
                    <div class="hide"><img id="slideShow" ng-src="{{product.images[2]}}"></div>

                </div>
                <div class="info">
                    <div id="name">{{product.name}}</div>
                    <div class="button medium">
                        <a href="#talentData" class="moreBtn">MORE</a>
                    </div>
                </div>

                <div class="skills-thumb">
                    <a href="#" class="boxedMedium">{{product.skills[0]}}</a>
                    <a href="#" class="boxedMedium">{{product.skills[1]}}</a>
                    <a href="#" class="boxedMedium">{{product.skills[2]}}</a>
                </div>

Answer 1

您的模态内容应该简单如下：

<div class="modalData" id="talentData">
  <div class="modalOverlay"></div>
  <div class="contentData">
    <div class="dataContainer">
      <div class="gr-2 gallery">        
        <div ng-repeat="image in product.images">
          <img ng-src="{{image}}">
        </div>
      </div>
      <div class="gr-2 biodata">
      </div>
    </div>
    <a href="#" id="closeData">X</a>
  </div>
</div>

*您还没有显示任何CSS，因此这可能不是您想要的结果的100％。

AngularJs - 模态弹出的Ng重复

1 个答案: