gpt4 book ai didi

javascript - 使用 Angular Directive(指令)添加 CSS 元素

转载 作者:行者123 更新时间:2023-11-28 06:58:49 25 4
gpt4 key购买 nike

我使用 angular 和 ng-repeat 来填充研究列表。此列表是动态的,因此您可以切换到每个元素的子元素。所以基本上我有一个 Accordion 风格的切换列表,可以在每个列表项上深入三个级别。我有一个 jQuery 问题,我认为应该用一些 Angular Directive(指令)或其他东西来解决。基本上我有一个箭头(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);
}
});

最佳答案

我只会使用 Angular 代码(根本不用 jQuery)。

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

在模板文件中有向上/向下箭头对象绑定(bind) ng-show="GlyphUp"

关于javascript - 使用 Angular Directive(指令)添加 CSS 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33353238/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com