使用角度指令添加CSS元素

使用angular和ng-repeat来填充研究列表。该列表是动态的，因此您可以切换到每个元素的子元素。所以基本上我有一个手风琴风格的切换列表，可以在每个列表项上深入三层。我有一个jQuery问题，我认为应该用一些角度指令或其他东西解决。基本上我有一个箭头（glyphicon）应该切换到上或下，这取决于您是否在查看此列表中的子元素或父元素。我有这个纯jQuery工作，只是从每个列表项中添加和删除一个css类。但是，它仅适用于列表中的第一项，因为ng-repeat会创建多个id，但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); 
    } 
});

来源

2015-10-26 Nodedeveloper101

我只想用角码（无jQuery的所有）。

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

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

来源

2015-10-26 20:35:12

添加基于你的对象的值类的变化https://code.angularjs.org/1.4.7/docs/api/ng /指令/ ngClass – GGJ

@ 9ers规则，9ers吸兄弟。但感谢您的帮助，我想出了这个小提琴http://jsfiddle.net/api/post/library/pure/ – Nodedeveloper101

使用角度指令添加CSS元素

回答

相关问题