使用angular指令添加CSS元素

Question

我使用angular和ng-repeat来填充研究列表。 该列表是动态的，因此您可以切换到每个元素的子元素。 因此，基本上，我有一个手风琴样式切换列表，每个列表项可以深入到三个级别。 我有一个jQuery问题，我认为应该用一些角度指令或其他方法解决。 基本上，我有一个箭头（glyphicon），该箭头应该向上或向下切换，具体取决于您是查看此列表中的子元素还是父元素。 我使用纯jQuery进行此操作，只是从每个列表项添加和删除css类。 但是，它仅适用于列表中的第一项，因为ng-repeat创建了多个id，但是jQuery仅适用于具有该id标记的第一个元素。

这是页面中的HTML。

<!-- User Studies List -->
<div ng-controller="StudiesController" id="before">
    <h3 class="center"> User Studies </h3>
    <div ng-repeat="study in studies" arrow>
        <div class="panel-group" style="margin-bottom:0">
            <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" href="#collapse{{$index}}">
                    <h3 class="panel-title">{{ study.study }} <span class="glyphicon glyphicon-menu-down pull-right"></span></h3>
                    <p></p>
                </div>
                <div id="collapse{{$index}}" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li class="list-group-item" data-toggle="collapse" href="#collapse{{study.id}}" style="margin-left:1%" id="sampleID{{$index}}">
                            <i>Sample: </i>{{ study.sample }}
                            <span id="glyph-switch" class="glyphicon glyphicon-menu-down pull-right"></span>
                            <span id="glyph-up" class="glyphicon glyphicon-menu-up pull-right"></span>
                        </li>
                        <div id="collapse{{study.id}}" class="panel-collapse collapse">
                            <ul class="list-group">
                                <li class="list-group-item" style="margin-left:3%"><i>Fastq: </i>{{ study.fastq }}
                                    <div class="dropdown center pull-right">
                                        <button class="btn-xs btn-default hvr-shadow" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Action <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="dLabel">
                                            <li id="list-item" data-toggle="modal" data-target="#more-metadata-modal" ng-click="showMore(study)">More Data</li>
                                            <li id="list-item" data-toggle="modal" data-target="#edit-metadata-modal" ng-click="showMore(study)">Edit</li>
                                            <li id="list-item" data-toggle="modal" data-target="#delete-metadata-modal" ng-click="showMore(study)">Delete</li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

这是Javascript

var count = 1;
$(document).on("click", "li[id*='sampleID']", function() {
    console.log("clicked");
    if(count > 0) {
        $('#glyph-switch').css('visibility','hidden');
        $('#glyph-up').css('visibility', 'visible');
        count -= 1;
        console.log("count", count);
    } else {
        $('#glyph-switch').css('visibility','visible');
        $('#glyph-up').css('visibility', 'hidden');
        count += 1;
        console.log("count",count);
    }
});

Answer 1

我只会使用角度代码（完全没有jQuery）。

因为您已经有一个研究对象，所以只需处理一个onClick="showGlyph($index)"传递索引，然后在代码中为上/下箭头$scope.GlyphUp = !$scope.GlyphUp设置一个状态。 。

在模板文件中，使用向上/向下箭头对象绑定ng-show="GlyphUp"