javascript - 在 ng-repeat 中突出显示单个元素

标签 javascript css angularjs

以下问题:

我正在使用 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();
    }

任何帮助都会很棒,

谢谢,哈乔

最佳答案

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

关于javascript - 在 ng-repeat 中突出显示单个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47953404/

相关文章:

javascript - 在切换可见性时删除容器高度

javascript - 路由更改时如何滚动回元素?

javascript - Angular : Providing methods to ng-model

javascript - AngularJS/CSS - 鼠标悬停时显示/隐藏元素

jquery - 将带有子元素的 div 容器附加到网页?

javascript - jQuery ajax 调用后 Angular Controller 作用域不更新

javascript - 显示loading.gif 直到加载div 图像加载

javascript - 如何在 ReactJS 中渲染 HTML 模板并绑定(bind)来自 JSON 响应的数据?

javascript - 使用 ReactJs 和 react-dnd 拖放可排序列表时出现问题

javascript - Ionic Angular Cordova $scope 不会在服务更新时更新