2017-01-06 11 views
1

の現在のの値を変更する必要がありますが、その後ng-src="{{array[current].src}}"も変更する必要がありますが、機能していません。どんな助けもありがとう。ng-srcで角度jsの双方向結合

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

答えて

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> 
関連する問題