ng-repeat＆ng-clickでの.attr（）によるsrcの変更が

Question

ng-repeatの画像（ピン）をロードしました。誰かが色付きのピンをクリックするとグレーになり、その逆もあります。

マイngのリピートは以下のとおりです。これらの画像上のng-repeat="note in vm.myData.contactHistoryContainer track by $index"

<!-- this is where the pin goes --> 
    <div class="pin-container"> 
    <div ng-if="note.pinPush == false"> 
     <!-- unselected pin --> 
     <img class="pin dark{{$index}}" src="app/assets/img/office-material.png" alt="uncolored pin" ng-click="vm.darkPinPress()"> 
    </div> 
    <div ng-if="note.pinPush == true"> 
     <!-- selected pin --> 
     <img class="pin colored{{$index}}" src="app/assets/img/office-material2.png" alt="colored pin" ng-click="vm.pinPress()"> 
    </div> 
    </div> 

ng-clickは、に行く：

var lightpin = "app/assets/img/office-material2.png"; 
var darkpin = "app/assets/img/office-material.png"; 

      function darkPinPress() { 
       console.log('dark pin pressed'); 
       $(this).attr('src', lightpin) 
      } 

      function pinPress() { 
       console.log('colored pin was pressed---'); 
       $(this).attr('src', darkpin) 
      } 

誰かが見ていると私はめちゃくちゃにしていますどこ私に知らせていただけますか？

<div class="pin-container"> 
    <div> 
     <img ng-show="!enabled" src="app/assets/img/office-material.png" alt="uncolored pin" ng-click="enabled=!enabled"> 
     <img ng-show="enabled" src="app/assets/img/office-material2.png" alt="colored pin" ng-click="enabled=!enabled"> 
    </div> 
    </div> 

そして、あなたがコントローラで、いくつかの関数を呼び出す必要がある場合は、NG-クリックでそれを呼び出す：console.log年代は、あなたがこれをやって簡素化することができ、ボタンの両方のタイプに

Answer 1

あなたの問題のためのjQueryを使用しないでください。私はあなたの問題を克服する一つの方法を見ることができるようにプランナーを作った。 https://plnkr.co/edit/19H8KnyLpzdMbEPX4Oeq?p=preview

<div ng-repeat="note in vm.notes"> 
    <div ng-click="note.pinPush = !note.pinPush"> 
    <div ng-if="note.pinPush"> 
     <img src="http://www.qygjxz.com/data/out/179/4361592-picture.jpg" style="width:200px;"> 
    </div> 
    <div ng-if="!note.pinPush"> 
     <img src="http://www.qygjxz.com/data/out/180/4964551-picture.jpg" style="width:200px;"> 
    </div> 
    </div> 
</div> 

だから、基本的な考え方は、すべてのクリックにnote.pinPush切り替えることです。 ng-ifは表示する画像を制御します。

編集：
https://plnkr.co/edit/cRj0SoFWAawGbvCnu1Kv?p=preview

<div ng-repeat="note in vm.notes"> 
    <div ng-click="vm.noteClicked(note)"> 
    <div ng-if="note.pinPush"> 
     <img src="http://www.qygjxz.com/data/out/179/4361592-picture.jpg" style="width:200px;"> 
    </div> 
    <div ng-if="!note.pinPush"> 
     <img src="http://www.qygjxz.com/data/out/180/4964551-picture.jpg" style="width:200px;"> 
    </div> 
    </div> 
</div> 

をコントローラにクリックコールと新しいplunker差がNGクリックです：<div ng-click="vm.noteClicked(note)">

注：srcが

Answer 2

をトリガします方法。

http://jsfiddle.net/MfHa6/1778/