Im используя угловой и ng-repeat, чтобы заполнить список исследований. Этот список является динамическим, поэтому вы можете переключаться на дочерние элементы каждого элемента. Таким образом, в основном у меня есть список переключателей стиля аккордеона, который может идти на три уровня в глубину каждого элемента списка. У меня проблема jQuery, которая, как мне кажется, должна быть решена с помощью некоторой угловой директивы или чего-то еще. В основном у меня есть стрелка (глификон), которая должна переключаться вверх или вниз в зависимости от того, смотрите ли вы на ребенка или родительский элемент в этом списке. У меня есть работа с чистым jQuery, который просто добавляет и удаляет класс css из каждого элемента списка. Однако он работает только с первым элементом списка, потому что ng-repeat создает несколько идентификаторов, но jQuery будет работать только с первым элементом с этим тегом id.добавить элемент CSS, используя угловую директиву
Это 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);
}
});
Добавить изменение класса на основе значений вашего объекта https://code.angularjs.org/1.4.7/docs/api/ng/директива/ngClass – GGJ
@ 9ers Правило, 9ers сосут брата. но спасибо за вашу помощь. Я понял это с этой скрипкой http://jsfiddle.net/api/post/library/pure/ – Nodedeveloper101