Ng-hide and last:子CSS

Question

我有；

<div class="exampleDiv">
    <element1></element1>
    <element2></element2>
    <element3></element3>
</div>

然后一些CSS使用last:child选择器(仅限右边距:0 FYI)。但是，我在元素1-3上使用了条件ng-hide，因此如果隐藏了element3，最后一个:child CSS不会移动到element2，因为从技术上讲，它是在DOM中呈现然后隐藏的。

所以我想知道有没有一种方法可以使用ng-hide并有一个类似于'last-visible-element‘选择器的东西。因此，当ng-hide工作时，用户可以看到的最后一个元素是否应用了此CSS？

提前感谢大家的帮助！

Answer 1

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

Answer 2

您可以尝试添加基于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>