Question

调用changeMainMedia函数后，当前值应该更改，然后ng-src="{{array[current].src}}"也应该更改，但它不起作用。任何帮助将不胜感激。

<div id="media-gallery" class="small reveal text-center media-gallery" data-reveal>
    <div class="modal-body">
        <div class="main-media">
            <img ng-bind="current" class="main-gallery media-gallery-main" ng-src="{{array[current].src}}" / </div>

            <hr>

            <div class="nested-media">
                <img ng-click="changeMainMedia($index)" ng-repeat="obj in array" class="thumbnail media-gallery-thumbnail" ng-src="{{obj.src}}" />
            </div>
        </div>

        <button class="close-button" data-close aria-label="Close reveal" type="button">
       <span aria-hidden="true">x</span>
    </button>
    </div>
</div>

<script>
    var app = angular.module("mediaGallery", []);
    app.controller("mediaGalleryCtrl", ['$scope', function(scope) {
        var array = [];
        for (var i = 1; i < 10; i++) {
            array.push({
                src: "gallery/image (" + i + ").jpg"
            });
        }

        scope.array = array;
        scope.current = 0;

        scope.changeMainMedia = function(index) {
            this.current = index;
        }
    }]);

Answer 1

您应该更改current范围变量

scope.changeMainMedia = function(index) {
    this.current = index
}

应该是

scope.changeMainMedia = function(index) {
    scope.current = index;
}

当用户点击像ng-click="selectedImage = obj"

这样的图像时，您可以在另一个范围变量中选择图像

<强>标记

<div class="main-media">
    <img ng-bind="current" class="main-gallery media-gallery-main" 
      ng-src="{{selectedImage.src}}"/> 
    <hr>
    <div class="nested-media">
        <img ng-click="selectedImage = obj" ng-repeat="obj in array" class="thumbnail media-gallery-thumbnail" ng-src="{{obj.src}}" />
    </div>
</div>

使用ng-src在角度js中进行双向绑定

1 个答案: