マッチIDと要素のNG-のMouseEnter変更境界線の色に

Question

Iは、固有のID

event.img = angular.element(` 
     <div class= "your-container"> 
     <img src="${getDartImage(event)}" 
       ng-mouseenter="$ctrl.clicker(${event.id})" class="dart"> 
     </div>`); 
event.img = $compile(event.img)($scope); 

を有する一方のコントローラで生成されたダーツ画像を有するIはまた、別のコントローラで生成されたDIVを有します一意のIDも持っています。

<scheduled-event   
    event="event" 
    ng-repeat="event in $ctrl.adherence.events" 
    ng-mouseenter="$ctrl.clicker1($ctrl.adherence.events[$index].id)"> 
</scheduled-event> 

私は、これらのIDを一致させたいと私は一つの要素にNG-mouseeenterを行う際に、ダーツ、divのボーダー言うことができます - 一致するidの変化で色を。

Answer 1

ng-classの助けを借りてこれを行うことができます。要素を入力するときには、マウスセンター関数をトリガーし、選択したIDにフラグを設定し、入力されたIDがフラグに設定されているIDと同じであるかどうかを確認します。

HTML：

<scheduled-event 

    event="event" 
    ng-repeat="event in $ctrl.adherence.events" 
    ng-mouseenter="$ctrl.clicker1($ctrl.adherence.events[$index].id)" 
    ng-class="{'bd-col':$ctrl.selectedId==$ctrl.adherence.events[$index].id}"> 

</scheduled-event> 

JS：

this.clicker1=function(id){ 
    this.selectedId=id; 
} 

CSS：

.bd-col{ 
border-color: #444; 
}