Ng-hide和last：child CSS

Question

我有;

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

然后一些CSS使用last：child選擇器（僅margin-right：0 FYI）。 但是，我在元素1-3上使用了條件ng-hide，因此，如果element3被隱藏，則last：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>