ng-repeatの単一要素を強調表示

Question

問題：

私は項目のリストを生成するためにng-repeatを使用しています。ユーザーが上のWebページ上の特別なマーカーをクリックすると、次の関数は対応するアイテムまでスクロールするイベントを受け取ります。スクロールするだけでなく、ユーザーがマウスを再び動かすまで、アイテムを強調表示したいと思います。私の問題は、このことです。私は、ng-repeatリストの1つの要素のCSSクラスを操作する必要があります。私はすべてのng-repeat要素が独自のローカルスコープを取得するため、可能性があると考えましたが、解決策が見つかりません。私のディレクティブの

パート：

//if a marker is clicked, the following code should bring the user to the corresponding item 
    $rootScope.$on("Scroll_to_product", function (event, args) { 
     product.gotoElement(args); 
    }); 
    /*function which takes the class id of an html element as argument and brings 
    the user to the corresponding product*/ 
    product.gotoElement = function (args) { 
     var elementID = 'product-' + args; 
     $location.hash(elementID); 
     // call $anchorScroll() 
     $anchorScroll(); 
    } 

すべてのヘルプは素晴らしいことだ、Hucho

Answer 1

私はこのウォーキングのPlunkerの例では、あなた

Plunker link

役立つかもしれ

のおかげだと思います

$scope.idSelectedVote = null; 
 
    $scope.setSelected = function(idSelectedVote) { 
 
     $scope.idSelectedVote = idSelectedVote; 
 
     console.log(idSelectedVote); 
 
    }

.selected { 
 
    background-color: red; 
 
}

<ul ng-repeat="vote in votes" ng-click="setSelected(vote.id)" ng-class="{selected : vote.id === idSelectedVote}"> 
 
    </ul>

Answer 2

それはほとんど私の頭を壊したが、最終的には簡単だった：

 product.highlightFeature = function (args) { 
     var id = '#'+ 'feature-' + args; 
     var myEl = angular.element(document.querySelector(id)); 
     myEl.addClass('feature-highlight'); 
    }; 

それは、簡単かつ迅速..です。しかし、あなたの助けに感謝します。これは、他人を助けるかもしれない ... ベスト

Hucho

あなたは https://docs.angularjs.org/api/ng/directive/ngClass ここにあなたのテンプレートで `NG-class`を使用することができます