[英]Ng-hide and last:child CSS
I have; 我有;
<div class="exampleDiv">
<element1></element1>
<element2></element2>
<element3></element3>
</div>
then some CSS using the last:child selector (only margin-right:0 FYI). 然后一些CSS使用last:child选择器(仅margin-right:0 FYI)。 However I use a conditional ng-hide on elements 1-3 and so if element3 is hidden, the last:child CSS is not moved to element2 as technically it is rendered in the DOM then hidden.
但是,我在元素1-3上使用了条件ng-hide,因此,如果element3被隐藏,则last:child CSS不会移到element2,因为从技术上讲,它是在DOM中呈现的,然后被隐藏了。
So I was wondering is there a way to use ng-hide and have something like a 'last-visible-element' selector. 所以我想知道是否有一种方法可以使用ng-hide并具有类似“ last-visible-element”选择器的功能。 So that as ng-hide does its work, the last element the user can see has this CSS applied to it?
因此,当ng-hide起作用时,用户可以看到的最后一个元素已应用此CSS?
Thanks for any help in advance! 感谢您的任何帮助!
is remove() what you look for since it does remove element from the dom tree: 是remove()您要查找的内容,因为它确实从dom树中删除了元素:
var myApp = angular.module("myApp", []); myApp.controller("myController", function($scope) { $scope.removeElement = function() { var elmn = angular.element( document.querySelector( '.test :last-child' ) ); elmn.remove(); }; });
.test { display: flex; justify-content: space-between; } .test div { border: solid; min-width: 5em; } .test :last-child { color: red; } .test :last-child:before { content:"actual last-child "; color:green; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="myApp"> <p>each time you click, last element is removed</p> <div ng-controller="myController" class="test"> <input type="button" value="Remove Div " ng-click="removeElement()"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>last-child</div> </div> </div>
http://codepen.io/gc-nomade/pen/KmvKdV http://codepen.io/gc-nomade/pen/KmvKdV
you may try adding dynamic
class based on some condition
, something like :- 您可以尝试根据
some condition
(例如:-)添加dynamic
类
css / style
.show {
display: inline;
}
.hide {
display: none;
}
script
<div class="exampleDiv">
<element1 ng-class="{'show' : item.isVisible == true, 'hide' : item.isVisible == false}"></element1>
<element2 ng-class="{'show' : item.isVisible == true, 'hide' : item.isVisible == false}"></element2>
<element3 ng-class="{'show' : item.isVisible == true, 'hide' : item.isVisible == false}"></element3>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.