给定ng-repeat使用的数组,我可以选择用每个项创建的单个项吗?

Given the array used with ng-repeat, can I select an individual item created with each item?

本文关键字:创建 单个项 我可以 ng-repeat 数组 给定 选择      更新时间:2023-09-26

我有一个angular应用程序,它从地图数据构建一个区域列表。区域既显示在使用ng-repeat的div的侧边栏中,也显示在地图上作为矢量特征。当用户在地图上选择一个区域时,我需要滚动到侧边栏中该区域的DIV。jQuery可以执行scrollTo动作给定一个元素,我知道哪个区域被选中;我能得到对匹配该项的DIV的引用吗?

我不能使用索引,因为在ng-repeat数组上可能有排序或过滤。还有其他选择吗?

编辑:

下面是一些相关的代码:

<div class="turf"
    ng-repeat="zone in layers.zones.features"
    ng-class="{
        selected: zone === selectedZone && zone !== highlightedZone,
        hover: zone === highlightedZone
    }"
    ng-click="selectZone(zone); $event.stopPropagation()">
    <h2>{{zone.name}}</h2>
    <input type="text" class="form-control" ng-model="zone.name" />
    {{zone.users}} users present
</div>

Openlayers将调用一个函数,当其中一个区域在地图上被点击:

zoneLayer.events.register("featureselected", null, function(e){
    var zone=e.feature;
    var element = null; // how do I get the element?
    $(element).scrollTo(); // or similar
});

如果您的区域对象有ID或其他标识符,则在div

中添加ID
<div class="turf"
    id="{{zone.ID}}"
    ng-repeat="zone in layers.zones.features"
    ng-class="{
        selected: zone === selectedZone && zone !== highlightedZone,
        hover: zone === highlightedZone
    }"
    ng-click="selectZone(zone); $event.stopPropagation()">
    <h2>{{zone.name}}</h2>
    <input type="text" class="form-control" ng-model="zone.name" />
    {{zone.users}} users present
</div>

然后找到你的区域id

zoneLayer.events.register("featureselected", null, function(e){
    var zone=e.feature;
    var element = $("#" + zone.ID); // how do I get the element?
    $(element).scrollTo(); // or similar
});

如果你不能为div添加id,那么添加data-zoneID属性并通过该属性查找元素var element = $("div[data-zoneID=" + zone.ID + "]");