javascript - Angular js 中与 ng-src 的两种方式绑定(bind)

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

您应该更改当前范围变量

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>