Two way binding in angular js with ng-src

Question

Upon calling changeMainMedia function, current value should change and then ng-src="{{array[current].src}}" should also change but it is not working. Any help would be appreciated.

<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;
        }
    }]);

Pankaj Parkar · Accepted Answer · 2017-01-06 16:28:37Z

1

You should be change current scope variable

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

should be

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

Rather you could have selected image inside another scope variable, when user clicks on image like ng-click="selectedImage = obj"

Markup

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

answered Jan 6, 2017 at 16:28

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Two way binding in angular js with ng-src

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related