[英]add CSS element using an angular directive
Im using angular and ng-repeat to populate a list of studies. 我使用angular和ng-repeat来填充研究列表。 This list is dynamic so you can toggle into child elements of each element. 该列表是动态的,因此您可以切换到每个元素的子元素。 So basically I have a accordion style toggle list that can go three levels deep on each list item. 因此,基本上,我有一个手风琴样式切换列表,每个列表项可以深入到三个级别。 I have a jQuery issue that I think should be solved with some angular directive or something. 我有一个jQuery问题,我认为应该用一些角度指令或其他方法解决。 Basically I have an arrow (glyphicon) that should switch to up or down depending on if your looking at a child or a parent element in this list. 基本上,我有一个箭头(glyphicon),该箭头应该向上或向下切换,具体取决于您是查看此列表中的子元素还是父元素。 I have this working with pure jQuery just adding and removing a css class from each list item. 我使用纯jQuery进行此操作,只是从每个列表项添加和删除css类。 However, it only works on the first item in the list because ng-repeat creates multiple id's but jQuery will only work on the first element with that id tag. 但是,它仅适用于列表中的第一项,因为ng-repeat创建了多个id,但是jQuery仅适用于具有该id标记的第一个元素。
This is the HTML from the page. 这是页面中的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>
This is the Javascript 这是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);
}
});
I would just use angular code (no jQuery at all). 我只会使用角度代码(完全没有jQuery)。
Since you already have an object of studies, just handle an onClick="showGlyph($index)"
passing the index and then in the code just set the a state for the up/down arrow $scope.GlyphUp = !$scope.GlyphUp
. 因为您已经有一个研究对象,所以只需处理一个onClick="showGlyph($index)"
传递索引,然后在代码中为上/下箭头$scope.GlyphUp = !$scope.GlyphUp
设置一个状态。 。
In the template file have the up/down arrow object bind ng-show="GlyphUp"
在模板文件中,使用向上/向下箭头对象绑定ng-show="GlyphUp"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.