AngularJSのプレビューを変更するには、ディレクティブまたはng-clickを使用してください。

Question

私はangularjsを初めて使い、jsに関数を書いて、私が指示を推測する方法を理解したいと思います。

私は一連のイメージを読み込むためにng-repeatを使用するイメージライブラリを持っています。画像の右側には、より大きなバージョンの画像を表示し、クリックされた画像に従って情報を更新するプレビューブロックがあります。

画像をクリックしたときにプレビュー領域を更新するにはどうすればよいでしょうか？画像をクリックして機能を呼び出すには、ディレクティブを作成する必要がありますか？

注 - データとイメージはすべて1つのオブジェクトの一部です。

これはjsを使用して更新する方法のスニペットです。

$('.box').on('click','.mainbox',function(){ 
    var imgid = this.id; 
    $('#preview-img').attr('src', collection[imgid].smImg); 
    $('#preview-title').text(collection[imgid].title); 
    $('#preview-year').text(collection[imgid].years); 
    $('#preview-desc').text(collection[imgid].description); 
}); 

Answer 1

私はあなたのHTMLがどのように見えるかを知っているが、それはこのようになります言うことはありません：

<div ng-controller="myCtrl"> 
    <div class="mainbox"> 
     <img ng-repeat="image in images" src="{{ image.url }} " 
      ng-click="setSelectedImage(image)" /> 
    </div> 

    <div id="preview"> 
     <img src="{{ selectedImage.url }}" /> 
     <h1>{{ selectedImage.title }}</h1> 
     <h3 class="years">{{ selectedImage.years }}</h3> 
     <p class="description">{{ selectedImage.description }}</p> 
    </div> 
</div> 

そして、あなたのコントローラのコードは次のようになります。

function myCtrl($scope) { 
    $scope.images = [ 
     { url: "urlOfFirst.png", title: "Image1" .. }, 
     { url: "urlOfSecond.png", title: "Image2" .. } 
    ]; 

    $scope.setSelectedImage = function(image) { 
     $scope.selectedImage = image; 
    } 
} 

this jsfiddleを例として参照