突出显示 ng-repeat 中的单个元素答案

【问题标题】：Highlight single element in ng-repeat突出显示 ng-repeat 中的单个元素
【发布时间】：2018-06-05 19:26:08
【问题描述】：

以下问题：

我正在使用 ng-repeat 生成项目列表。如果用户点击我上面网页上的一个特殊标记，以下函数会收到一个事件并向下滚动到相应的项目。除了向下滚动之外，我还想突出显示该项目，直到用户再次移动鼠标。我的问题是，为此我需要操作我的 ng-repeat 列表中单个元素的 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();
    }

任何帮助都会很棒，

谢谢，胡乔

【问题讨论】：

您可以在模板中使用ng-class docs.angularjs.org/api/ng/directive/ngClass 这是一个相关问题stackoverflow.com/questions/19331779/…

标签： javascript css angularjs

【解决方案1】：

它几乎让我头疼，但最后很容易：

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

简单快捷..;但感谢您的帮助。这可能会帮助其他人...... 最好的

胡乔

【讨论】：

【解决方案2】：

我认为这个 woking 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>

【讨论】：