AngularJs -Ng-在模态弹出窗口上重复

Question

我是angularJs的新手。我正在尝试在弹出窗口上显示用户配置文件，这是基于我已经使用ng-repeat创建的显示。我尝试使用ng-repeat显示的图库没有显示，我已经尝试使用其他方法，如orderby或|filter。它只显示来自我的变量的最后一个图像。

有没有办法以缩略图的形式显示模式弹出数据？谢谢

以下是我的代码

(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']

        }
];


})();

这是我的Html，显示的缩略图已经使用ng-repeat加载了成功的数据。

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

现在，我正在尝试打开包含更多详细信息的模式，并使用ng-repeat在其中显示图片库。这是HTML

 <div class="modalData" id="talentData">
                    <div class="modalOverlay"></div>
                    <div class="contentData">


                        <div class="dataContainer">
                            <div class="gr-2 gallery">

                                <div><img ng-src="{{product.images}}"></div>

                            </div>

                            <div class="gr-2 biodata">

                            </div>
                        </div>


                        <a href="#" id="closeData">X</a>

                    </div>
                </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%结果。