使用AngularJs

Question

我正在使用modal制作带Angularjs的滑块。我正在尝试完成点击图片模式时弹出显示我点击的图片。

html的

<div class="float" ng-repeat="a in $ctrl.f">

                <div class="column is-narrow topIcons">
                    <div class="photo topIconsHover" ng-click="$ctrl.togglePicture()">
                        <figure class="image is-128x128">
                            <img ng-src="{{a.imageSrc}}">
                        </figure>
                    </div>
                </div>
            </div> 

<div class="modal" id="myModal">
                <div class="modal-background" ng-repeat="a in $ctrl.f"></div>
                <div class="modal-content">
                    <p class="image is-4by3">
                        <img ng-src="{{togglePicture(a.id)}}">
                    </p>
                </div>
                <button class="modal-close" ng-click="$ctrl.closeModal()"></button>
            </div>

component.js

function PhotoController($scope){
    var vm = this;

    vm.f =  [{
        albumName: "Name",
        imageSrc: 'app/images/bio.jpg',
        owner: "OwnerName",
        id: 1
    },
    {   albumName: "Name",
        imageSrc: 'app/images/bio.jpg',
        owner: "OwnerName",
        id: 2
    }];

vm.togglePicture = function(id) {
        $('#myModal').addClass('is-active');

    };

我试图通过将图像的id作为函数参数传递来获取imageSrc但是不起作用。在我的函数中我应该怎么做才能使用id选择正确的imageSrc然后显示它以及我的imageSrc应该是什么样子？

正在考虑这样的事情<img ng-src="{{togglePicture(a.id)}}">？

Answer 1

在功能中传递所选图像。

<div class="photo topIconsHover" ng-click="$ctrl.togglePicture(a)">

然后在控制器中设置选择的图像

vm.selectedImgsrc='';

vm.togglePicture = function(a) {
        $('#myModal').addClass('is-active');
        vm.selectedImgsrc=a.imageSrc;
    };

然后修改模态以查看所选图像

<p class="image is-4by3">
    <img ng-src="{{$ctrl.selectedImgsrc}}">
</p>